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1 - JOHDANTO 




Processing on merkittävä kehitysympäristö, jossa ohjelmointikieltä käytetään multimediateoksien 
tekemiseen tietokoneella. Sen toimintafilosofian ja helppokäyttöisyyden lisäksi Processingin 
viehättävyys perustuu sen käyttötarkoitusten moninaisuuteen: näihin kuuluvat kuvat, äänet, 
verkkosovellukset, matkapuhelimet ja elektronisten laitteiden interaktiivinen ohjelmointi. 

Taiteilijoiden taiteilijoille suunnittelema Processing tuo yhteen ammattimaisten ja 
amatöörimäisten käyttäjien yhteisön, johon kuuluu graafisia suunnittelijoita, videokuvaajia, 
painotaloja, arkkitehtejä ja verkkosuunnittelijoita. Sitä käyttävät myös taideopettajat, jotka 
tahtovat opettaa oppilailleen ohjelmoinnin käyttöä taiteeseen. Processingin kehittäjät tekivät sen 
alusta asti opetusvälineeksi. 

Processing on sekä luovuuden että ohjelmoinnin ympäristö. 

PIIRRÄ JA LUO TIETOKONEKOODILLA 

Multimedian luomiseen tarkoitettuna ohjelmana Processingin erikoisuutena on tietokoneen 
komentojen käyttö piirtämiseen, 2D tai 3D -animaatioiden tekemiseen, äänitaiteen luomiseen ja 
ympäristönsä kanssa vuorovaikutuksessa olevien digitaalisten olioiden suunnitteluun. 

Kynän, siveltimen, hiiren tai piirtoalustan kaltaisten vapaan käden työkalujen käyttöön tottuneille 
taiteilijoille voi olla yllättävää, että muotoja, värejä ja liikkeitä voi luoda vain kirjoittamalla 
tietokoneelle käskyn. 

Tämä taiteellisen ilmaisun tapa käyttää koodin avulla tietokoneen ominaisuuksia (nopeutta, 
toimintojen automaattisuutta ja moninkertaistamista, vuorovaikutteisuutta jne.) luodakseen 
alkuperäisiä töitä, joita ei olisi voinut tehdä muuten, ja joiden luominen olisi vaatinut enemmän 
aikaa perinteisten menetelmien tai monimutkaisten ohjelmien avulla. 

Processingin avulla voidaan myös ohjelmoida mikrokontrollereita, jotka ovat vuorovaikutuksessa 
ympäristönsä kanssa. Yhdistettynä ääntä, lämpöä tai liikettä aistiviin sensoreihin nämä halvat 
mikrokontrollerit voivat vuorostaan luoda kuvia, aktivoida robottikäden, lähettää viestejä 
internetissä... Tietenkin riippuen tekemästäsi ohjelmasta. 

Tässä käyttöoppaassa autetaan sinua kehittämään itseilmaisun kykyä opetellessasi 
ohjelmoimaan Processingilla. Ainoastaan mielikuvituksesi rajoittaa luomuksiasi. 

OPPIMISYMPÄRISTÖ 
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Processing on helppokäyttöinen, se on alusta alkaen suunniteltu opettamaan ohjelmoinnin 
perusteita visuaalisessa ympäristössä. 

Processingin opetustavoite tekee siitä loistavan työkalun ohjelmoinnin opiskelemiseen ei- 
ohjelmoijille tai aloitteleville ohjelmoijille. Monet opettajat käyttävät sitä opettaakseen oppilailleen 
ohjelmoinnin käsitteitä ja käytäntöä. 

Toivottavasti tämä opas lisää Processingiin kohdistuvaa mielenkiintoa opettajien, kouluttajien ja 
laajemmassa mittakaavassa ammattilaisten ja harrastajien keskuudessa. 

VAPAA OHJELMISTO 

Processing on vapaa ohjelma. Se toimii VVindovvsissa, Linuxissa, Macissa (ja missä tahansa muussa 
käyttöjärjestelmässä, jossa toimii Java). Siitä on myös versioita matkapuhelimiin ja 
mikrokontrollereihin. 

Vapaana ohjelmana Processingin etuna on vapaaehtoisten ohjelmoijien anteliaisuus. He ovat 
luoneet käyttäjille kierrätettäviä ohjelmanpätkiä (jotka tunnetaan tietokoneslangissa kirjastoina). 
Yli sata kirjastoa laajentaa ohjelman mahdollisuuksia äänen, videon ja vuorovaikutteisuuden 
kentillä. 

HISTORIAA 



Processing on suunniteltu Aesthetics Computation Group (ACG) -laboratoriossa, joka kuuluu MIT 
Media Lab -laitokseen. Sen suunnittelivat Ben Fry ja Casey Reas vuonna 2001. Tämä ohjelma on 
enemmän tai vähemmän projektin Design By Numbers lopputulos. Projektin loi laboratorion 
johtaja, taideohjelmoija John Maeda. Ohjelmointikieltä käsittelevässä kirjassaan Maeda painottaa 
kuvankäsittelyohjelmoinnin yksinkertaisuutta ja toiminnan taloudellisuutta. 

Monia tämän ensimmäisen projektin piirteitä on näkyvillä Processing-ympäristössä: 
ohjelmistoliittymän yksinkertaisuus, jossa ensisijalle asetetaan kokeellisuus ja oppiminen, ja 
monet funktiot, jotka toimivat molemmissa ympäristöissä. Processingin suunnittelijat eivät kätke 
tätä historiaa. 

Processingin nykyinen ja tässä käyttöoppaassa käytetty versio on 1.5.1. 
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2. ESIMERKKEJÄ 



Multimedian luomiseen sopiva ohjelmointikieli Processing mahdollistaa piirtämisen, kaksi- ja 
kolmiulotteisten animaatioiden tekemisen, taiteilun äänellä, sekä ympäristön kanssa 
vuorovaikuttavien elektronisten laitteiden suunnittelemisen. Kymmenet tuhannet taiteilijat, 
suunnittelijat, arkkitehdit, tutkijat ja yritykset käyttävät sitä luomaan hämmästyttäviä projekteja 
monilla alueilla: 

• Processingia on käytetty mainontaan, elokuvien alkuteksteihin, videoihin ja sarjakuviin. 

• Processingia on käytetty tieteellisen tiedon visualisointiin monilla monimutkaista tietoa 
vaativilla alueilla, kuten ympäristön, liikenteen, talouden ja humanististen tieteiden 
tutkimuksessa. 

• Processingia on käytetty luomaan musiikkia ja muuttamaan ääniä. 

• On mahdollista laittaa Processing tuottamaan äänitehosteita tanssijoiden liikkeisiin 
perustuen. 

• Arkkitehtuurin alueella Processing mahdollistaa tilan esittämisen, sitä käytetään 
arkkitehtuuriprojekteissa automatisoimaan rakennusten suunnittelu kahdessa tai kolmessa 
ulottuvuudessa. 

Tässä luvussa esitellään joitain esimerkkejä Processingin käytöstä eri ympäristöissä. 

MYCELIUM 
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Piirteitä ilmestyy ruudulle. Niistä muodostuu vähitellen kasvot. Tämä animaatio simuloi sienten ja 
bakteerien rihmamaisten osien kehitystä. 

Ryan Alexanderin luomus vuodelta 2010: http://onecm.com/projects/mycelium/ 



NYTIMES 365/360 




NY Times visualisoi New York Timesin verkkosivujen informaatiota. Ohjelma käyttää verkkosivun 
tietoa ja visualisoi tiedon tärkeyden ja suhteen muuhun tietoon. Lopulta ilmestyy korkean 
tarkkuuden kuva, joka on valmis tulostettavaksi. 

Jer Thropen luomus vuodelta 2009: http://blog.blprnt.com/blog/blprnt/7-days-of-source-day-2- 
nytimes-36536 



SHADOVV MONSTERS 



Shadovv Monster on interaktiivinen installaatio, joka toimii varjojen avulla. Yleisö näkee varjojensa 
muuttuvan hirviöiksi ja oudoiksi olennoiksi. 

Philip Worthingtonin luomus vuodelta 2005: 
http://worthersoriginal.com/viki/#page=shadowmonsters 

PLATONIC SOLIDS 




Ernst Haeckel kirjoitti 1800-luvulla kirjan luonnossa esiintyvistä taiteellisista muodoista. Tämä 
ohjelma luo geometrisiä muotoja tuon kirjan inspiroimana. 

Michael Hansmeyerin teos: http://www.michael-hansmeyer.com/html/solids/pOs.html 

CHAMP D'OZONE 
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Champ cTOzone on installaatio, joka esiteltiin Pariisissa vuonna 2007 osana Pariisin ilmastoa 
esittelevää näyttelyä. Se tehtiin yhteistyössä Airparifin kanssa. Se on holograafinen projektio 
virtuaalisista pilvistä, joiden väri muuttuu jatkuvasti riippuen Pariisin ilmanlaadusta. 

HeHen teos vuodelta 2007: http://hehe.org.free.fr/hehe/champsdozone/ 



COP15 GENERATIVE IDENTITY 




C0P15 
COPENHAGEN 

(JHITiO HAT1QNS CU MAT E CHAKQE CQNFERENCE ?DDB 

Yhdistyneiden Kansakuntien ilmastokonferenssin logo suunniteltiin lontoolaisessa studiossa 
Processingilla. He kehittivät logon perustuen vuorovaikutusvoimiin. Logo ilmentää konferenssin 
keskusteluiden monimutkaisuutta. 

Lontoon studio okdeluxen luomus vuodelta 2009: http://www.okdeluxe.co.uk/cop15/ 



BODY NAVIGATION 



Body navigation on performanssilava. Se luotiin yhteistyönä koreografi Tina Tarpgaardin ja 
kehittäjä Jonas Jongejanin välillä. Tanssijoita kuvataan infrapunakameralla, joka seuraa heidän 
liikkeitään, ja Processing kehittää heti kuvat heidän ympärilleen. 

Jonas Jongejanin ja Ole Kristensenin luomus vuodelta 2008: 
http://3xw.ole.kristensen.name/works/bodv-navigation/ 



FLIGHT 404 




Robert Hodgin tutkii koodin ilmaisumahdollisuuksia, joihin sisältyvät usein algoritmi ja hän itse. 
Ohjelma luo monia elokuvia, jotka se jakelee nettiin. Nämä esimerkit kierrätetään sitten monella 
eri tavalla, kuten iTunesissa olevalla katseluohjelmalla ja Voronoi-diagrammeilla luotuina 
perhosina. 

Robert Hodginin luomus vuodelta 2007: http://flight404.com/ 



THE SHEEP MARKET 
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THE 5HEEP MARKET 44Hb/LAOO0 



fiOiOBQ shQBp crcatcd 




Tämän taideprojektin osana nuoret ja vanhat käyttäjät kutsuttiin piirtämään lammasta. 
Lampaista tulee jotenkin mieleen Antoine de Saint-Exuperyn teos Pikku prinssi. Nämä piirrokset 
on jaettu suureen tietokantaan, joka on saatavilla verkossa. Processing voi lukea kaikki 10 000 
piirrosta ja visualisoida kynän reitin. 

Aaron Koblinin luomus vuodelta 2008: http://www.thesheepmarket.com 
Tämän luvun kuvien tekijänoikeudet kuuluvat teosten tekijölle. 
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3- PROCESSINGIN ASENTAMINEN 



Processing on kirjoitettu Java-ohjelmointikielellä, se toimii periaatteessa missä tahansa 
käyttöjärjestelmässä, joka tukee Java-ohjelmointikieltä. Parhaiten tuetut alustat ovat kuitenkin 
Windows (Windows XP ja Windows 7), Linux ja Mac OS X. 

Processingin asentaminen on aika helppoa ja riippuu käyttöjärjestelmästäsi. Joka tapauksessa voit 
mennä lataussivulle: http://processing.org/download ja napsauttaa käyttöjärjestelmäsi nimeä. 

Processingin käyttöliittymä avautuu: 



Windowsissa ei kannata valita vaihtoehtoa "Without Java", koska silloin joudut asentamaan Javan 



Napsauttamalla linkkiä Windows lataat tiedoston "procesing-xxx.zip". Kun lataus on valmis, pura 
arkisto ja laita purettu "Processing"-kansio C:\Program Files\ -hakemistoon. 

Tämän jälkeen voit mennä kansioon C:\Program Files\Processing ja ajaa tiedoston 
"processing.exe". 

Perusteet 

4. Processingin perusteet 



4- Linux 
4^ Mac D5X 



4- UUindoLus 

4- UJindoLus [ LUithout Java] * 



WINDOWS 



erikseen. 
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4. PROCESSINGIN PERUSTEET 



Processing tarjoaa sekä kehitysympäristön että kattavan ja helppokäyttöisen funktiokirjaston, 
jotka on lisätty Java-ohjelmointikieleen. Ohjelmointiympäristöä käytetään ohjelmien 
kirjoittamiseen, kääntämiseen, julkaisemiseen ja korjaamiseen. Se on yksinkertainen ja sisältää 
ohjelmoinnin vaatimat ominaisuudet, mutta on silti helppokäyttöinen. 

Processing perustuu Javaan. Java on ohjelmoitaessa käytettävä syntaksi. Processing huolehtii 
yleensä monimutkaisista operaatioista, kuten ikkunoiden, äänen, videon ja kolmiulotteisuuden 
hallinnasta. Se tarjoaa laajan joukon ennalta määritettyjä metodeja, jotka yksinkertaistavat 
grafiikkaohjelmien tekemistä, ja tekevät siitä helppokäyttöisen ihmisille, jotka tahtovat luoda 
grafiikkaa ilman monimutkaisia ohjelmointikäsitteitä ja matematiikkaa. 

Tämä luku esittelee Processingin käyttöliittymän perusteet ja minimimäärän Javan syntaksia, 
jotta pääset alkuun. 

Nykyisin Processingin käyttöliittymä on olemassa vain englanninkielisenä. Sen käyttö on kuitenkin 
helppoa ja tulevissa versioissa se voi olla tarjolla lokalisoituna. 

KÄYTTÖLIITTYMÄ 

Processingin käyttöliittymä koostuu kahdesta erillisestä ikkunasta: pääikkunasta, jossa luot 
projektisi, ja esikatseluikkunassa, jossa ohjelman tulokset näkyvät. 

Käyttöliittymässä on seuraavat osat: 

1. Toimintopalkki 

2. Välilehtipalkki 

3. Editointialue 

4. Ulostuloalue 

5. Katseluikkuna 

6. Valikkopalkki (ei näy ruutukaappauksessa) 
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sketc... 




sketch_sep07d | Processing 1.2.1 



OO 1QDD 


sketch_sep07d 




0 



O 



e 




Toimintopalkki 
► 



Ui 



Suorita ohjelma. 
Lopeta ohjelman suoritus. 
Luo uusi ohjelma. 
^3 Avaa ohjelman. 

m 

l_l Tallentaa ohjelman. 

Vie ohjelman verkkoon. 

TYÖHAKEMISTO 

Tämä on hakemisto, johon ohjelmat tallennetaan. Oletusarvoisesti tämä hakemisto on nimeltään 

Processing ja sjaitsee hakemistossa Documents (Mac) tai 

My Documents (Windows). GNU/Linuxissa tämä on omassa kotihakemistossasi. 



Muuttaaksesi hakemistoa, mene valikkoon Files > Preferences. Ilmestyvässä ikkunassa voit 
napsauttaa Browse valitaksesi haluamasi hakemiston. 
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^ ^ " " Preferences 



Sketchbook location: 



/Users/Lionel/Documents/Processing ( Browse ) 



Editor font size: 10 (requires restart of Processing) 



0 Increase maximum available memory to 1024 MB 

III! Use multiple .jar files when exporting applets (ignored vvhen using libraries) 

3 Delete previous applet or application folder on export 

0 Use external editor 

3 Check for updates on startup 

More preferences can be edited directly in the file 
/Users/harkle/Library/Processing/ preferences.txt 
(edit only when Processing is not running) 

( OK ) ( Cancel ) 



Saadaksesi selville työhakemistosi, valitse valikosta Sketch > Show Sketch Folder. Tämä 
vaihtoehto on myös saatavilla näppäimistökomennolla Ctrl-k Windowsissa ja Linuxissa tai cmd-k 
Macissa: 

V Processing File Edit teMSjToolsHeljs 



Run 


älR 


Present 




Stop 




Import Library... 


► 


Show Sketch Folder 




Add File... 





OHJELMOINTIKIELEN PERUSTEET 

Processing käyttää Javaa luodakseen luonnoksesi. Tätä kieltä koneesi lukee luodakseen 
luonnoksesi, ja sillä on joukko syntaksisääntöjä, joita on noudatettava, tai ohjelma ei toimi. On 
tunnettava myös joitain peruskäsitteitä. 

Processing ottaa huomioon kirjainten koon, joten isot ja pienet kirjaimet ovat eri asia: vapaa ja 
Vapaa ovat eri sanoja! 



PUOLIPISTE 



Jokaisen komennon jälkeen (piirrä ympyrä, tee laskelma, jne.) täytyy kirjoittaa puolipiste joka 
kertoo ohjelmalle komennon päättyvän. Seuraavassa esimerkissä käytämme merkkejä "//" 
lisätäksemme kommentin, jota ei oteta huomioon ohjelmaa suoritettaessa. 

//Luo ellipsi 
ellipse(10,10, 10, 10); 
//Julista muuttuja 
int numero = 10 + 23; 



METODIKUTSUT 



Prosessing tarjoaa joukon ennaltamääriteltyjä metodeita: piirrä suorakulmio, määrittele väri, 
laske neliöjuuri jne. Jokaisella näistä metodeista on erityinen nimi. Kutsuaksesi niitä voit kirjoittaa 
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metodin nimen ottaen huomioon isot ja pienet kirjaimet. Nimen jälkeen tulee usein sulut, joihin 
asetetaan tiettyjä arvoja, kuten väri, sijainti, koko jne. Seuraavassa esimerkissä on harmaa 
ympyrä. 




fill(128); 

ellipse(50, 50, 60, 60); 

ULOSTULON NÄYTTÖ 

Ulostuloalue näyttää tekstiä testausta ja korjausta varten. Nähdäksesi jotain voit käyttää 
metodia 

printlnQ ; 

println("Hei maailma!"); 



println(1000) ; 



Laskut 

Processing voi tehdä matemaattisia laskuja. Tätä ympäristöä käyttäessäsi joudut laskemaan 
arvoja. Yhteenlasku, vähennyslasku, jakolasku ja kertolasku voidaan yhdistää. Voit käyttää 
sulkuja määrittelemään toimenpiteiden järjestyksen. Muista pisteet! Processing käyttää 
desimaaleihin pistettä eikä pilkkua. Tässä on esimerkkejä: 

println(10 + 5) ; 

println(10 +5*3); // 5*3 (tulos 15) ja lisätään 10 
println((10 + 5) * 3) ; // 10+5 (tulos 15) ja 15 kertaa 3 
println(10.4 + 9.2) ; 

Tämä tuottaa seuraavan tuloksen: 
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IS 

19.599998 



Joitain aritmeettisia operaatioita voidaan lyhentää. Esimerkiksi i++ antaa saman tuloksen kuin i = 
i + 1. 

Nyt tiedät perusteet Processingista, voit jo kirjoittaa koodia, jonka avulla voit toteuttaa 
projekteja. 

Suunnittelu 

5. Piirrostila 

6. Muodot 

7. Värit 
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5- PIIRROSTILA 



Piirrostilassa näytetään koodin tulokset. Tämä ikkuna näyttää luomuksesi kaksi- tai 
kolmiulotteisena. 

Tämän tilan luo komento size(), joka ottaa kaksi argumenttia: size(leveys, korkeus); 
Kirjoita esimerkiksi seuraava komento Processingin ohjelmaikkunaan: 



OO §QD 



size (323,2G0);| 

Seuraava ikkuna luodaan napsauttaessasi suorita-nappia: 



Kokeile ulottuvuuksien muuttamista nähdäksesi tulokset. 

Oletusarvoisesti: 

sizeQ ; 




...luo ikkunan, jonka koko on 100 pikseliä kertaa 100 pikseliä. 
Onnittelut, olet luonut ensimmäisen ikkunasi! 

KOORDINAATTIAVARUUS 

Kun työskentelet kahdessa ulottuvuudessa, akselien x ja y koordinaatit vastaavat leveyttä 
(horisontaalinen akseli) ja korkeutta (vertikaalinen akseli). Sopimuksen mukaan vasen yläkulma 
vastaa arvoja x = 0 ja y = 0. Akselin x arvot nousevat oikealle ja akselin y arvot lisääntyvät 
alaspäin, toisin kuin kartesiaanisessa tasossa. Nämä x ja y -arvot voivat teoriassa jatkua 
loputtomiin, vaikka käytännössä ikkunasi koko rajoittaa näkyvän alueen maksimikokoa. Tässä 
tilassa voimme piirtää. 
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Tässä tapauksessa käytämme komentoa size yhdessä kolmannen parametrin kanssa 
osoittaaksemme, että työskentelemme kolmiulotteisessa avaruudessa 3D size(i00, 100, P3D); 
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6- MUODOT 



Processing tarjoaa monia muotoja. Tässä ovat tärkeimmät. 



PISTE 



Aloitamme piirtämisen pisteellä. Yksi piste vastaa pikseliä, joka on ikkunassa sijainnissa x 
leveyssuunnassa ja sijainnissa y korkeussuunnassa. Koordinaatit annetaan muodossa (x, y). Tässä 
esimerkissä piste on hyvin pieni. Se on keskipisteessä. 



point(50, 50); 




Huomaa, että kehys on 100x100, joten piste on keskellä. Jos piirrämme kehyksen ulkopuolelle, et 
näe pistettä. 



VIIVA 



Viiva (AB) koostuu määritelmällisesti loputtomasta määrästä pisteitä alkupisteen A ja 
loppupisteen B välillä. Rakentaaksemme sen keskitymme vain pisteiden A ja B koordinaatteihin x 
ja y. Jos esimerkiksi oletusikkunassa piste A on ikkunan vasemmassa alanurkassa, ja piste B on 
oikeassa ylänurkassa, voimme piirtää tämän viivan komennolla line(xA,yA,xB,yB) : 

line(15, 90, 95, 10); 




SUORAKULMIO 

Suorakulmio piirretään neljällä arvolla komennolla rect(x-yläkulma,y-yläkulma, leveys, korkeus). 
Ensimmäinen x ja y -arvojen pari merkitsee suorakulmion vasenta yläkulmaa, kuten pisteen 
tapauksessa. Sen sijaan seuraavat kaksi arvoa eivät merkitse vasenta alakulmaa, vaan tämän 
suorakulmion leveyttä (x-akseli, horisontaalinen) ja korkeutta (y-akselilla, vertikaalinen). 

Esimerkki: 

rect(10, 10, 80, 80); 




Koska kaksi viimeistä arvoa (leveys ja korkeus) ovat identtiset, saamme neliön. Muuttele arvoja 
ja katso tuloksia. 
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Käytä metodia CENTER saadaksesi kaksi ensimmäistä arvoa vastaamaan suorakulmion 
keskipistettä: 

rectMode (CENTER) ; 
rect(50, 50, 80, 40); 



ELLIPSI 

Kuten suorakulmio, ellipsi luodaan tilassa CENTER (oletusarvoinen tila) tai tilassa CORNER. Niinpä 
seuraava komento luo neliön, jonka keskipisteen koordinaatit ovat kaksi ensimmäistä arvoa 
sulkujen sisällä. Kolmas arvo vastaa horisontaalisen akselin läpimittaa ja vastaa vertikaalisen 
akselin läpimittaa: huomaa, että jos kolmas ja neljäs arvo ovat identtisiä, saat ympyrän, muuten 
saat ellipsin: 

ellipse(50, 50, 80, 80); 

Kokeile kolmannen ja neljännen arvon muuttamista ja tarkkaile tuloksia. 



O 



KOLMIO 



Kolmio on kolmen pisteen muodostama kuvio. Kolmio luodaan komennolla 
triangle(xi,yi,x2,y2,x3,y3), jolla määritellään kolmion kolme kärkipistettä: 

triangle(10, 90, 50, 10, 90, 90); 




KAARI 

Ympyrän kaari voidaan tehdä komennolla arc(x, y , leveys, korkeus, aiku, io PP u), jossa pari x, y 
määrittelee ympyrän keskipisteen, toinen ja kolmas pari määrittää kulman loppupisteen: 

arc(50, 50, 90, 90, 0, PI); 



NELITAHOKAS 
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Nelitahokas luodaan määrittelemällä neljä paria x ja y -koordinaatteja komennolla 

quad(xl,yl,x2,y2,x3,y3,x4,y4) myötäpäivään: 
quad(10, 10, 30, 15, 90, 80, 20, 80); 




KÄYRÄ 

Käyrä luodaan komennolla curve(xi, y i, x2, Y 2, x3, Y 3, x4, y 4), jossa x1 ja y1 määrittelevät 
käyrän ensimmäisen läpikulkupisteen, x4 ja y4 toisen läpikulkupisteen , x2 ja y2 alkupisteen ja x3, 
y3 loppupisteen: 

curve(0, 300, 10, 60, 90, 60, 200, 100); 




BEZIER-KÄYRÄ 

Toisin kuin komento curveQ, Bezier-käyrä luodaan komennolla bezier(xi,yi,x2,y2,x3,y3,x4,y4) 

bezier(10, 10, 70, 30, 30, 70, 90, 90); 




TASOITETTU KÄYRÄ 

Komento curveVertexf) luo joukon x ja y -koordinaatteja kahden läpikulkupisteen välille 
komennolla curveVertex(ensimmäinen läpikulkupiste , xN , yN , xN , yN , xN , yN , viimeinen 
läpikulkupiste) : 

beginShapeO ; 
curveVertex(0, 100); 
curveVertex(10, 90); 
curveVertex(25 , 70); 
curveVertex(50 , 10); 
curveVertex(75 , 70); 
curveVertex(90, 90); 
curveVertex(100, 100); 
endShape() ; 




VAPAAT MUODOT 
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Kokonainen joukko vapaita muotoja voidaan piirtää tasolle pisteiden sarjana, komennoilla 
beginShapeO , vertex(x,y) , . . . ,endShape(). Jokainen piste luodaan koordinaateilla x ja y. Funktio 
close komennossa endShape(CLOSE) osoittaa, että muoto suljetaan, ja että jälkimmäinen 
yhdistetään, kuten kuusikulmion esimerkissä: 

beginShapeO ; 
vertex(50, 10); 
vertex(85, 30); 
vertex(85, 70); 
vertex(50, 90); 
vertex(15, 70); 
vertex(15, 30); 
endShape(CLOSE); 




ÄÄRIVIIVAT 



Olemme havainneet, että tähän mennessä kaikilla mainituilla esimerkeillä on ääriviivat ja 
täytetty pinta. Jos tahdot tehdä näkymättömän ääriviivan, käytä komentoa noStroke(): 

noStroke() ; 

quad(10, 10, 30, 15, 90, 80, 20, 80); 




TÄYTE 



Vastaavasti voimme jättää pinnan täyttämättä käyttämällä komentoa noFillQ : 
noFillQ; 

quad(10, 10, 30, 15, 90, 80, 20, 80); 



Tähän mennessä ikkunan tausta on ollut harmaa, muotojen reunat ovat olleet mustat, ja täyttö 
on ollut valkoinen. Seuraavassa luvussa opit muuttamaan nämä värit. 
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7. VÄRIT 



Piirrä kuva ruudulle ja muuta pikselien väriä. Pikselit ovat pieniä alueita, yleensä neliömäisiä, joilla 
on väri. Jokaisella värillä on kolme kanavaa, jotka ovat punainen, vihreä ja sininen. 100% arvo 
jokaisella kanavalla on valkoinen. 0% arvo jokaisella kanavalla on musta. Se on valoa, ei maalia. 
Niinpä jokaisen kanavan arvon kasvaessa sen väri vaalenee. 

Esimerkiksi 100% punainen, 80% vihreä, 20% sininen antaa värin oranssi. Metodi fillQ antaa 
meidän määritellä värin seuraaville piirrettäville muodoille. Jokainen värikanava annetaan 
asteikolla 0-255. Niinpä 80% arvosta 255 on 204 ja 20% arvosta 255 on 51. 

TAUSTAVÄRIT 

Voit muuttaa taustaväriä metodilla backgroundO . Huomaa: komento backgroundO pyyhkii ruudun 
edellisen komennon jälkeen! 

background(0, 0, 0); 




TÄYTTÖVÄRI 

Joka kerta kun piirrät muodon, se tehdään täyttövärillä, joka valitaan tässä vaiheessa. Se 
tehdään kutsumalla metodia fillQ. 




noStroke() ; 
fill(255, 204, 51); 
rect(25, 25, 50, 50); 

Processing tarjoaa erilaisia formaatteja värin ilmaisemiseen. Jos teet verkko-ohjelmointia, tunnet 
luultavasti heksadesimaaliformaatin. Kirjoitamme siis: 

fill(#ffcc33) ; 
rect(25, 25, 50, 50); 

Voit määritellä värin alfakanava-arvon. Se esittää värin läpinäkyvyyden. Tehdäksemme tämän 
menetelmälle täytyy tarjota neljä arvoa. Neljäs arvo on alfa-arvo. 

noStroke() ; 

fill(255, 204, 51); // oranssi 
rect(25, 25, 50, 50); 

fill(255, 255, 255, 127); // valkoinen osittain läpinäkyvä 
rect(35, 35, 50, 50); 
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Jos tahdot valita värin, joka on harmaan sävy, voimme antaa yhden parametrin komennolle. Se 
on harmaan arvo väliltä 0-255. 




fill(127) ; 

rect(25, 25, 50, 50); 

Voit ottaa muotojen täytön pois päältä kutsumalla metodia noFill(). 

ÄÄRIVIIVAN VÄRI 

Muuttaaksesi ääriviivan väriä, voit kutsua metodia strokeQ, jonka parametreinä on halutun värin 
kanavat. Kutsu komentoa noStrokeQ poistaaksesi ääriviivan värit. 




size(200, 200); 
smoothQ ; 

background(255) ; // piirrämme valkoisen taustan 

stroke(#000000) ; // ääriviiva on musta 
f ill(#FFFF00) ; // täyte on keltainen 
strokeWeight(5) ; 

translate(width / 2, height / 2); 

ellipse(0, 0, 120, 120); 

stroke(255, 0, 0); // viiva on punainen 
line(20, -40, 20, 0); 

stroke(0, 0, 255); // viiva on sininen 
line(-20, -40, -20, 0); 

noFill(); // seuraavaa muotoa ei täytetä 
stroke(#000000) ; // viivasta tulee musta 
bezier(-45, 0, -45, 60, 45, 60, 45, 0); 

VÄRIMUUTOSTEN LAAJUUS 

Oletusarvoisesti mikä tahansa tyylimuutos (täytön väri tai esineen muoto tai paksuus) vaikuttaa 
kaikkeein, jonka maalaat. Rajoittaaksesi näiden muutosten laajuutta voit laittaa muutoksesi 
komentojen pushstyle () ja popstyle ()i väliin. 

□ 




size(100, 100); 
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background(255) ; 

stroke(#000000) ; 
fill(#FFFF00) ; 
strokeVVeight(l) ; 
rect(10, 10, 10, 10); 

pushStyleO; // Avaa tyylin "sulkeet" 

stroke(#FF0000) ; 
fill(#00FF00) ; 
strokeVVeight (5) ; 
rect(40, 40, 20, 20); 

popStyle(); // Sulkee tyylin "sulkeet" 

rect(80, 80, 10, 10); 

Harjoitus: 

Poista komennot pushStyleO ja popStyle() ja tarkkaile muutoksia. 

VÄRIAVARUUS 

Värien valinnassa punainen, vihreä ja sininen on yksi mahdollisista väriavaruuksista. Processing 
tarjoaa myös HSB-tilan. Tämä merkitsee "hue, saturation, brighness", eli väri, kylläisyys, 
kirkkaus. Valitsemme arvon 0-100 jokaiselle kanavalle. Väri on numero, joka valitsee värin 
sijainnin kromaattisella skaalalla, joka on sateenkaari. Punainen on vasemmalla, sen jälkeen 
tulevat oranssi, keltainen, vihreä, sininen ja purppura. 

Metodi colorModeO on käyttökelpoinen muutettaessa numeroskaalaa, jolla määritellään värit ja 
muutetaan väriavaruutta. Esimerkiksi komento colorMode(RGB , 1.0) muuttaa skaalan, jota 
käytetään määrittämään jokaista värikanavaa, joten se menee nollasta ykköseen. 

Tässä muutamme väritilaksi HSB:n tehdäksemme liukuvärin, joka muistuttaa sateenkaaren 
värejä. 




noStroke() ; 
size(400, 128); 

// Väri määritellään numeroilla 0-400 
colorMode(HSB, 400, 100, 100); 

// Se on 400 toistoa... 

for (int i = 0; i < 400; i++) { 

fill(i, 128, 128); 

rect(i, 0, 1, 128); 

} 

Interaktiivisuus 

8. Video 

9. Videon tuominen 

10. Mikrofonin sisääntulo 

11. Hiiri 

12. Näppäimistön tapahtumat 

13. Tulostaminen 

14. Vieminen 
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8- VIDEO 



Processing antaa sinun viedä animoidun tai interaktiivisen ohjelman QuickTime -formaatissa 
olevana videoanimaationa. Luodaksemme videoita voimme käyttää ennalta määriteltyä 
MovieMaker-objektia kirjastosta org.processing.video. Linux-käyttäjien tulee huomata, että tätä 
ominaisuutta ei ole käytettävissä. 



MOVIEMAKERIN TARKOITUS 



MovieMaker-objekti on Processingin ennalta määritelty luokka, joka luo videotiedoston, ja johon 
liitetään kuvia, kun ohjelma suoritetaan. Käyttääksesi sitä ohjelmassasi, tuo videokirjasto 
Processingiin: 

t ^^^^J Tool s Help 

Run 3€R 
Present O^R 
Stop 

DXF Export 
JavaScript 
Minimi Audio 
Network 
OpenCL 
PDF Export 
Serial l/O 



Video 



1 

Julistamme ohjelmamme alussa muuttujan, joka varastoi video-objektimme. Ohjelman täytyy 
luoda objekti setupQ -osassa antamalla sille joukko parametrejä: 



Import Library... 



Show Sketch Folder 
Add File... 




• Viittaus ohjelmaan 

• Videon leveys 

• Videon korkeus 

• Ulostulotiedoston nimi 

import processing. video.*; 

MovieMaker mm; // Luo muuttuja objektiamme varten 

void setup() { 

size(size(300,300) ; 

/* 

• Luodaan objekti MovieMaker. 

• Video on samaa kokoa kuin meidän kuvamme. 

*/ 

mm = new MovieMaker (this , width, height, "Video . mov") ; 



LISÄÄ KUVIA 

Jokainen metodin dravv () kutsu joutuu kertomaan MovieMaker-objektille, että nyt ruudulla oleva 
kuva pitää tallentaa videotiedostoon. 

void draw() { 

ellipse(mouseX, mouseY, 20 , 20) ; //Ellipsin luominen 

mm. addFrameQ ; //Lisätään kuva videoon 

} 
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VIDEON VIIMEISTELY 



Tässä vaiheessa videon nauhoitus loppuu, kun lähdet pois ohjelmasta. Voit käskeä ohjelman 
MovieMaker lopettaa nauhoittaminen milloin tahansa. Lisäämme toiminnon, joka lopettaa videon 
nauhoittamisen, kun painat jotain nappia. 

void keyPressedQ { 
mm. f inish() ; 

} 

MUOKKAA REKISTERÖINTIÄ 

Oletusarvoisesti MovieMaker-objekti tekee pakkaamatonta videota 15 ruutua sekunnissa. 
Interaktiivisille ohjelmille tämän raportointitavan pitäisi olla liian raskas. Voit määritellä 
pakkausformaatin ja muuttaa ruutujen määrän luodessasi objektin MovieMaker. 

Parametrit ovat seuraavat: 



• Viittaus ohjelmaan 

• Videon leveys 

• Videon korkeus 

• Ulostulotiedoston nimi 

• Ruutujen määrä sekunnissa 

• Pakkauskoodekki 

• Laatu 

mm = new MovieMaker (this , width, height, "video. mov", 30, 
MovieMaker. H263, MovieMaker . HIGH) ; 

(Luettavuuden vuoksi koodi on jaettu kahdelle riville.) 
Näillä parametreilla videon nauhoittaminen on jouheampaa. 
Tässä on joitain mielenkiintoisia videokoodekkeja: 



• MovieMaker. H264: Hidas enkoodaus ja dekoodaus. Käyttää hyvin vähän tilaa. 

• MovieMaker. MOTIONJPEG_B: Hyvin nopea enkoodaus ja dekoodaus. Käyttää vähän 
tilaa. 

• MovieMaker. ANIMATION: Tukee alphakanavaa. Käyttää paljon levytilaa, koska se on 
pakattu tappiottomasti. 
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9- VIDEON TUOMINEN 



On mahdollista kaapata kuvia videokamerasta. Tätä kuvaa voit katsoa tai editoida. 



TUETUT KAMERATYYPIT 



Kamerat ovat helppokäyttöisiä USB-kameroita, joita kutsutaan myös verkkokameroiksi. On 
myös mahdollista käyttää kameraa, joka on kytketty Firevvire-porttiin 1394. Tähän lasketaan 
DC1394 -kamerat ja DV -kamerat. 

Processing-kirjaston käyttämä videokirjastao on QuickTime, jonka on tehnyt Apple. Kaikki 
QuickTimen tukemat kamerat toimivat. Apple tarjoaa tämän kirjaston vain Mac OS X ja Windows 
-käyttöjärjestelmiin. GNU/Linuxissa on parempi käyttää GSVideo-kirjastoa. Se käyttää 
GStreamer-kirjastoa erinomaisen hyvin. 

VIDEON KAAPPAAMINEN KIRJASTOLLA 

Tässä kerrotaan videokirjaston käytöstä. Kuten yllä on ilmaistu, kirjasto toimii vain 
käyttöjärjestelmissä Mac OS X ja Windows. Ensin meidän täytyy tuoda videokirjasto: Sketch> 
Import Library > ... > Video. 

import processing. video. *; 

Tämän jälkeen julistamme muuttujan, joka tallentaa objektin Camera. Valitsemme tätä 
käyttävän kameran. Kameran täytyy olla kytkettynä koneeseen, jotta voimme käyttää tätä 
kirjastoa. Jos koodi antaa virheviestin kun luomme kameraa, kokeile muita kameranumeroita. 

Capture camera; 

void setupQ { 
size(640, 480); 
background(0) ; 

String[] devices = Capture. list() ; 
println(devices) ; 

camera = new Capture(this , 320, 240, devices[0]); 

} 

Näytämme draw() -metodilla viimeisen kamerasta saadun kuvan ainoastaan kuvan ollessa uusi. 
Kuvat saadaan videokameralta tietyllä taajuudella, esimerkiksi 30 kertaa sekunnissa, mikä ei 
välttämättä vastaa ohjelmamme nopeutta. 

void draw() { 

if (camera. availableQ) { 
camera . read() ; I 

camera. f ilter(INVERT) ; 
image(camera, 160, 100); 

} 

} 

Voit käyttää videokaappaukseen kuvatyyppiä PiMag. Voimme täten lukea kuvan pikselit, 
muokata ne, näyttää ruutua muutaman kerran, ja monia muita asioita. 
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10- MIKROFONIN SISÄÄNTULO 



Äänilähteet ovat helppo tapa lisätä interaktiivisuutta näppäimistön ja hiiren lisäksi. Ne tarjoavat 
käyttäjälle alkuperäisen lähteen, jota voi käyttää interaktiivisuuteen, ja joka tarjoaa erilaisen 
suhteen tietokoneeseen ja ohjelmaan. Käyttäjä voi olla fyysisemmin mukana ja käyttää 
ohjelmaasi epätavallisella tavalla. Mikrofonista tuleva ääni voidaan soittaa ja äänenvoimakkuutta 
ja muita muuttujia voidaan analysoida. 



Processing voi käyttää kirjastoa Minim sound. 



MINIM 



Jossain vaiheessa Processingin jakeluversioon liitettiin Minim-äänikirjasto, joka soittaa ääntä ja 
kaappaa mikrofonista tulevat äänet. Tämä kirjasto on jo asennettu Processingiisi. Tarkasta sen 
olemassaolo hakemistosta Sketch menu> Import Library > ... > Minim audio. 

Processing File Edit Tools Help 



kun 3€R 
PreserE fr KR 

Stop 



Import Library.- 


MM 


DXF Export 


Show Sketch Folder 




JavaScript 


Add Hl*.,, 




Minim Audin 






Network 
OpenGL 






PDF Export 






Serial l/O 






Video 



Riippuen alustasta ja ohjelmaversiosta Processing lisää tätä toimintoa varten ohjelman alkuun 
enemmän tai vähemmän koodirivejä. Tässä tapauksessa tarvitsemme ainakin seuraavan 
komennon: 



® ^ O LectLireSon | Processing LI 



OO HQBB 


LectureSon § 




import ddf .minim 


^^^^^^ 



import ddf. minim.*; 

Tämä on komento, jolla voit tuoda kaikki Minim-kirjaston ominaisuudet ohjelmaasi. Tämän 
tuontilauseen ddf.minim.* avulla voimme soittaa ohjelmassamme ääntä. 



MINIMIN ASETUKSET 



Kun laukaisemme ohjelman Run-napilla, äänikirjasto Minim käynnistyy. Tämä esimerkki voi vaatia 
pääsyä äänikortille käyttöjärjestelmässä, jotta ääniaaltoja voidaan luoda. Tämä merkitsee, että 
ohjelman lopussa Minim pitää ottaa pois päältä. 



Ei haittaa, vaikka et vielä ymmärrä kaikkea sanomaamme. Tämä ei ole liian vakavaa. Tiedä vain, 
että seuraava koodi tarvitaan jokaisen Minimiä käyttävän ohjelman alkuun: 

import ddf.minim.*; 
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Minim minim; 



void setup() { 

minim = new Minim(this); 

} 

Huomaa myös, että tämä koodi tarvitaan jokaisen Minimiä käyttävän ohjelman loppuun: 

void stopQ { 
minim. stop() ; 
super . stop() ; 

} 

LISÄÄ ÄÄNILÄHDE 



Lisätäksesi mikrofonin sisääntulon meidän täytyy luoda ääniobjekti, joka pääsee mikrofonin 
tuottamaan ääneen. 

import ddf. minim.*; 

Minim minim; 
Audiolnput in; 

void setupQ { 

minim = new Minim(this); 

in = minim. getl_ineIn(Minim. STEREO, 512); 

} 

Sen täytyy myös lopettaa äänen kaappaus ja Minim-kirjasto ohjelman lopussa. Me käytämme 
metodia stop (). 

void stop() { 
in . close() ; 
minim. stopQ ; 
super. stop() ; 

} 

KATSO ÄÄNTÄ 



Aiomme muuttaa ohjelmamme taustaväriä. Kun ääni on voimakkaampi, taustaväri (background) 
muuttuu valkoisemmaksi. Käytämme äänen sisääntuloa (in). Sillä on kolme aliobjektia: left, right 
ja mix. Stereomikrofonin tapauksessa ne merkitsevät vasenta kanavaa, oikeaa kanavaa ja niiden 
välimuotoa. Näillä kanavilla voimme käyttää metodia level(), joka palauttaa äänen. 

void draw() { 
background (i n . mix . le vei () *2550) ; 

} 

Kuvakaappaus ohjelmasta keskimääräisellä äänenvoimakkuudella: 




PIENI PELI 

Meidän pitää nyt näyttää, kuinka voimme luoda hyvin yksinkertaisen pelin, jossa ohjaukseen 
käytetään mikrofonia. Peli koostuu pallosta, joka on ruudun oikealla puolella. Se menee hitaasti 
mutta varmasti vasemmalle. Pelaajan ääni painaa palloa takaisin oikealle. Tavoitteena on päästä 
ääriviivan yli. 

Aluksi muutamme ruudun kokoa, laitamme smoothin päälle, ja määrittelemme ääriviivat 
valkoisiksi. 

void setupQ { 
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size(600, 100); 
smooth() ; 
stroke(255); 

minim = new Minim(this) ; 

in = minim. getl_ineIn(Minim. STEREO, 512); 

} 

Voimme luoda muuttujan, joka tallentaa pallon sijainnin. Se julistetaan ohjelman alussa, jolloin se 
on saatavilla kaikkialla. Laitamme sille arvon 0. 

float ballX = 0; 
void setupQ { 

Metodissa draw() määrittelemme mustan taustan ja piirrämme pallon, joka reagoi ääneen. 
Jokaisessa draw() -metodin kutsussa lisäämme mikrofonin äänitason pallon x-koordinaattiin. Se 
alkaa liikkua vähitellen, kun teemme ääntä. 

void draw() { 
background(0) ; 

ballX = ballX + in. mix. level()*20; 
ellipse(25 + ballX, height - 25, 50, 50); 

} 



Estääksesi palloa lähtemästä ruudulta lisäämme kaksi ehtoa, jotka korjaavat tilanteen, jos 
muuttuja ballX on pienempi kuin 0 tai suurempi kuin ruudun leveys. 

void draw() { 
background(0) ; 

ballX = ballX + in. mix. level()*20; 

if (ballX < 0) { 
ballX = 0; 

} 

if (ballX > width-25) { 
ballX = width-25; 

} 

ellipse(25+ballX, height-25, 50, 50); 



Lisäämme ehdon, jonka mukaan pallon väri muuttuu, jos se menee rajan yli. 

void draw() { 
background(0) ; 

ballX = ballX + in. mix. level()*20; 

if (ballX < 0) { 
ballX = 0; 

} 

if (ballX > width-25) { 
ballX = width-25; 

} 

if (ballX > 500) { 

fill(255, 0, 0); 
} else { 

fill(255); 

} 

line(500, 0, 500, 100); 
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ellipse(25+ballX, height-25, 50, 50); 

} 



Jotta pelistä tehtäisiin monimutkaisempi, teemme ehdon, jolla pallo menee takaisin pysyvästi. 
Jokaisella komennon draw() kutsulla pienennämme hievan sen sijaintia x-akselilla. 

void draw() { 
background(0) ; 

ballX = ballX - 0.5; 

ballX = ballX + in. mix. level()*20; 

if (ballX < 0) { 
ballX = 0; 

} 

if (ballX > width - 25) { 
ballX = width - 25; 

} 

if (ballX > 500) { 

fill(255, 0, 0); 
} else { 

fill(255); 

} 

line(500, 0, 500, 100); 

ellipse(25 + ballX, height - 25, 50, 50); 

} 

Nyt voit kuvitella muita tapoja käyttää ääntä projekteissasi. Voit analysoida äänen taajuutta, 
tehdä synteesin, luoda ääniefektejä mittausta varten, ja monta muuta asiaa. 
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HIIREN TAPAHTUMAT 



Tässä luvussa näemme ohjelman vuorovaikutuksen hiiren kanssa. Processing kerää hiireltä 
tietoja, kuten hiiren sijainnin ja napsautukset. Luomme pienen ohjelman, joka perustuu 
ympyröihin, jolla esittelemme satunnaiset liikkeet. 

HIIREN SIJAINTI 

Hiiren koordinaatit ikkunassa nähdään kahdella muuttujalla: mouseX ja mouseY. Niillä voimme 
tietää hiiren sijainnin suhteessa piirrosikkunaamme, alkaen ikkunan vasemmasta yläkulmasta. 
Seuraavassa esimerkissä luomme ohjelman, joka piirtää ympyrän hiiren sijaintiin. 




void setup() { 
size(200,200) ; 
smooth() ; 

} 

void draw() { 

el lipse(mouseX, mouseY, 15,15); 

} 

Muutamme edellisen esimerkin muuttamalla dynaamisesti ympyrän läpimittaa. Se valitaan 
satunnaisesti metodilla randomf), joka luo satunnaisen numeron tietyllä arvovälillä. Kun 
Processing tekee komennon execute(), muuttuja r täytetään satunnaisella numerolla väliltä 3-30: 
12, 25, 23, 11, 22, 4, 10, 11, 25... Ympyrän läpimitan muutos johtaa ympyrän välkkymiseen hiiren 
kursorin ympärillä. 
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void setup() { 
size(300, 300) ; 
smooth() ; 

} 

void draw() { 

float r = random(3 , 30) ; 

ellipse(mouseX,mouseY, r , r) ; 

} 

Kun hiiri lähtee ikkunasta, hiiren sijaintia ei enää välitetä ohjelmallemme. Ympyrät piirretään ja ne 
kerääntyvät hiiren viimeiseen sijaintiin. 

NAPSAUTUKSET 

Voimme vastaanottaa hiiren napsautuksia käyttäen metodeita mousePressed() ja 
mouseReleased(). 

Molemmat metodit sallivat meidän tietää koska hiiren nappia painetaan ja koska se on vapaana. 
Edellisen esimerkin mukaan voimme muuttaa ympyrän täyttöväriä sen mukaan painaako 
käyttäjä hiiren nappia. Valitsemme harmaan sävyn satunnaisesti komennolla fill(), kun hiiren 
nappia painetaan. 



8 O SourisRandomGns 




float ton_de_gris = 255; 

void setup() { 
size(300, 300); 
smooth() ; 

} 

void draw() { 

float r = random(10, 80) ; 
f ill(grey) ; 

ellipse(mouseX, mouseY, r, r) ; 

} 

void mousePressedO { 
grey = random(255) ; 

} 

Processingin avulla voimme tietää mitä hiiren nappia painetttiin. Tähän käytämme muuttujaa 
MouseButtons, joka tunnistaa painetaanko vasenta, oikeaa tai keskimmäistä hiiren nappia (LEFT, 
RIGHT, CENTER). Käytä tätä muuttujaa piirtääksesi ympyrän, joka vaihtaa väriä riippuen siitä 
mitä hiiren nappia painetaan. 
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void setup() { 
size(200,200) ; 
smooth() ; 

} 

void draw() { 
background(255) ; 
eli ipse( 100, 100,200,200) ; 

} 

void mousePressedO { 

if (mouseButton == LEFT) fill(0); 
if (mouseButton == RIGHT) fill(255); 
if (mouseButton == CENTER) fill(128); 

} 



MUUT TAPAHTUMAT 



Processing kaappaa kaksi muuta hiiren tapahtumaa täsmälleen sen sijainnissa ikkunan yläpuolella. 

mouseMoved() havaitsee hiiren liikkeen kun se liikkuu piirrosikkunan yläpuolella. Jos hiiren osoitin 
poistuu ikkunan alueelta tai lopettaa liikkeen tämä metodi ei toimi. 

mouseDragged() kutsutaan, kun käyttäjä napsauttaa nappia ja liikuttaa hiirtä ikkunan päällä. Sen 
ominaisuuksiin kuuluu hiiren vetämisen hallinta. mouseDragged() toimii, vaikka hiiren osoitin lähtisi 
ulos ikkunasta. 

Seuraavassa esimerkissä käytämme näitä metodeja. Kun mouseMoved() kutsutaan, muutetaan 
ympyrän täyttöväriä, ja kun mouseDragged kutsutaan, muutetaan ympyrän kokoa. 




int r = 100; 
int c = 100; 

void setup() { 
size(255, 255); 
smoothO ; 

} 
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void draw() { 
background(255) ; 
fill(c); 

ellipse(width/2 , height/2, r, r) ; 



void mouseMoved() { 
c = mouseY; 

} 

void mouseDragged() { 
r = mouseX; 

} 



KOHDISTIN 



Joskus on hyvä kätkeä hiiren kohdistin. Tässä on käsky kohdistimen piilottamiseksi: 

noCursor () ; 

On myös mahdollista muuttaa kursorin muotoa osoittamaan eri tapahtumia käyttäjälle. Tähän 
käytetään komentoa cursorQ parametreillä ARROVV, CROSS, HAND, MOVE, TEXT, VVAIT. 



■ 




void setup() { 
fill(255); 

rect(10, 10, 20, 80); 
fill(175); 

rect(40, 10, 20, 80); 
fill(100) ; 

rect(70, 10, 20, 80); 

} 

void draw() 

// Katsomme voitko lennättää yhtä kolmesta neliöstä 
// Ja muutamme kursoria vastaavasti 

if (mouseX > 10 && mouseX < 30 && mouseY > 10 && mouseY < 90) { 
cu rsor (HAND) ; // Näyttää käden 

} 

else 

if (mouseX > 40 && mouseX < 60 && mouseY > 10 && mouseY < 90) { 
cu rsor (ARROVV) ; // Näyttää nuolen 

} 

else 

if (mouseX > 70 && mouseX < 90 && mouseY > 10 && mouseY < 90) { 
cursor (VVAIT) ; // Näyttää tiimalasin 

} 

else { 

cursor (CROSS) ; // Näyttää ristin jos emme tee mitään 

} 
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12. NÄPPÄIMISTÖN TAPAHTUMAT 



Näppäimistön tapahtumat kaappaamalla ohjelma voi vastata käyttäjän toimenpiteisiin. 
Näytämme tässä kappaleessa kuinka haemme tiedon, joka liittyy näppäimistöön, ja me luomme 
yksinkertaisen kirjoituskoneen, jolla voimme kirjoitella tekstiä ruudulle. 

Viimeksi painetun näppäimen arvo tallennetaan muuttujaan, joka julistetaan Processingissa. Tämä 
muuttuja voi tallentaa vain yhden kirjaimen, jota symbolisoi esimerkiksi 'a', 'b', 'c'... Tässä 
tapauksessa suuri kirjain on eri kirjain kuin pieni kirjain. 

Seuraavassa esimerkissä näytämme ikkunassa merkin, joka vastaa painettua näppäintä. Tähän 
käytämme metodia textQ. 




void draw() { 
background(204) ; 
fill(0); 
textSize(70) ; 
text(key,30, 70) ; 

} 

Voimme kaapata ohjelmaamme, kun käyttäjä on painanut tai vapauttanut näppäimen 
näppäimistöllä, metodeilla keyPressed() ja keyReleased(). Nämä kaksi metodia Processing kutsuu 
automaattisesti, kun näppäimistön tila muuttuu. 

Seuraavassa esimerkissä keyPressed() ja KeyReleased() muuttavat muuttujan y arvoa, jolla kirjain 

sijoitetaan ruudulle. 

Listen 

Read phonetically 




size(130,200) ; 
textSize(80) ; 
stroke(0) ; 
fill(0); 

} 

void draw() { 
background(204) ; 
line(10, 100, 120, 100) ; 
text(key , 35, y) ; 

} 

void keyPressed(){ 
y = 180; 

} 

void keyReleased(){ 
y = 80; 

} 

NÄPPÄINKOMENNOT 

Erikoisnäppäimet kuten nuolet (YLÖS, ALAS, VASEMMALLE, OIKEALLE) tai ALT, CONTROL, SHIFT 
tallennetaan muuttujaan keyCode. Testi if (key==CODED) kertoo onko painettu näppäin 
erikoisnäppäin vai eikö. Ohjelmassa meidän täytyy erottaa suuret ja pienet kirjaimet riippuen 
näppäimestä, jota tahdot testata. 



Seuraavassa esimerkissä luomme erityisen kirjoituskoneen, jossa on mahdollista liikuttaa tekstiä 
nuolilla. 



Aina kun näppäintä on painettu, se tallennetaan merkkijonoon, joka näytetään draw() - 
komennolla käyttäen metodia textQ. 




String s = ""; 
int x = 50; 
int y = 50; 

void setup() { 
size(200,200) ; 

} 

void draw() { 
background(255) ; 
fill(0); 
text(s, x, y) ; 

} 

void keyPressedO { 
if (key == C0DED){ 

if (keyCode == LEFT) x = x - 1; 
if (keyCode == RIGHT) x = x + 1; 
if (keyCode == UP) y = y - 1; 
if (keyCode == DOWN) y = y + 1; 

} 

else { 

s = s + key; 

} 

} 
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Huomaa aaltosulkujen käyttö jokaisen if-komennon jälkeen. Aaltosulut voidaan jättää pois, jos 
syntaksi toimii vain yhden komennon kohdalla. Käytämme myös String-tyyppistä muuttujaa, joka 
tallentaa sarjan merkkejä, ja joka on erittäin hyvä esimerkiksi lauseiden tallentamiseen. 

Processing määrittelee myös muuttujan keyPressed. 

Varoitus! Vaikka syntaksi on identtinen, sitä ei pidä sekoittaa metodiin keyPressedf), jolla on 
sama nimi. Tämä muuttuja kertoo meille aina, jos näppäintä painetaan, tai jos sitä ei voida 
käyttää metodissa draw(). 

Seuraavassa esimerkissä piirrämme ympyrän, jos painettu näppäin on 'c', neliön jos painettu 
näppäin on Y. 



void draw() 
{ 

rectMode (CENTER) ; 

background(128) ; 

if (keyPressed == true) 

{ 

if (key == 'c') { 

ellipse(50,50,90,90) ; 



flO" sketc. 



O ^ sketc... 




O 




} 

else if (key == 'r') { 



rect(50,50,90,90) ; 

} 



} 



} 
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13 - TULOSTAMINEN 



Tähän asti olemme työskennelleet ruudulla luoden kuvia ja animaatioita. Nyt keskustelemme 
tulostamisesta: teemme PDF-tiedoston, jonka tulostamme paperille. 

SUORA TILA 

Tässä esimerkissä luomme 500 satunnaista ympyrää ja piirrämme ne PDF-dokumenttiin, joka 
tallennetaan työkansioomme. 




import processing.pdf.*; 
size(400, 400, PDF, "Pallot.pdf"); 
for (int i = 0; i < 500; i++) 

ellipse(random(width) , random(height) , 50, 50); 
exit() ; 

Tässä esimerkissä aloitamme tuomalla kaikki luokat kirjastosta processing.pdf. Käytämme 
metodia size (), joka ottaa neljä parametriä. Huomaat varmaan tässä avainsanan, joka kertoo 
Processingille, että piirrämme dokumentin "Pallot.pdf", joka on metodin neljäs parametri. 

Tällä metodilla emme tarvitse ikkunoita, koska voimme piirtää suoraan dokumenttiin emmekä 
ruudulle. Tämä ohjelma päättyy komennolla exit(), joka käskee Processingin lopettaa ohjelma 
itsekseen, kunhan olemme painaneet käyttöliittymän Stop-nappia. 

Luotu dokumentti on ohjelmasi hakemistossa. Voit avata sen kaksoisnapsauttamalla. 
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BO O CjCerdesFDF O 



Norn 

Cercles.pdf 
_ CerclesPDF.pde 



f ""»^U 

NAUHOITUSTILA 

Voimme nyt nähdä, kuinka voit piirtää sekä ruudulle että tiedostoon. PDF-tiedostoon piirretään 
komennoilla beginRecordf) ja endRecordf). Molemmat menetelmät antavat meidän aloittaa ja 
lopettaa grafiikkakomentojen piirtäminen PDF-tiedostoon. 

Kuten aiemminkin, tuloksena oleva tiedosto on tallennettu ohjelman kansioon. 

Seuraavassa esimerkissä luomme graafisen työkalun, jonka siveltimen koko riippuu hiiren 
nopeudesta. Ohjelman käynnistyessä metodi setupO aloittaa nauhoittamisen komennosta 
beginRecordf), joka ottaa ensimmäisenä parametrinä viennin tyypin ja tiedostonimen toisena 
parametrinä. Kun painat VÄLILYÖNTIÄ, nauhoitus loppuu ja ohjelma pysähtyy. Kuten aiemminkin, 
tiedosto tallennetaan ohjelman kansioon. 




import processing.pdf.*; 
boolean drag = false; 

void setup() 
{ 

size(400, 400); 
smooth() ; 

beginRecord(PDF, "Pallot . pdf ") ; 

} 

void draw() { 
if (drag) 
{ 

float r = dist(pmouseX, pmouseY, mouseX, mouseY) + 5; 
ellipse(mouseX, mouseY, r, r) ; 

} 

} 

void mouseDragged() { 
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drag = true; 

} 

void mouseReleased() { 
drag = false; 

} 



void keyPressedO { 
endRecordQ ; 
exit() ; 

} 

Seuraava rivi: 

float r = dist(pmouseX, pmouseY, mouseX, mouseY) + 5; 



... voi laskea hiiren nopeuden käyttäen metodia dist ja muuttujia pmouseX, mouseX, mouseY ja 
pmouseY. Voimme lisätä 5, jotta meillä ei ole läpimitan 0 ympyröitä ruudulla. 

Voimme käyttää muuttujaa drag ja piirtää käyttäjän tekemät ympyrät komennolla draw(). 

KIRJAGENERAATTORI 

Sen sijaan että loisimme yhden dokumentin, luomme monisivuisen kirjan. Luomme dynaamisesti 
käännettävät sivut (http://fr.wikipedia.org/wiki/Folioscope) . Jokainen sivu näyttää kuvan 
animaation. Me käytämme metodia nextPage(), joka luo tyhjän sivun joka kerta kun metodia 
kutsutaan nauhoituksen aikana. 



Folioscope 



import processing.pdf.*; 

PGraphicsPDF pdf; 
float x = 0; 
float y = 75; 

void setup() { 
size(400, 150); 
smooth() ; 

pdf = (PGraphicsPDF) beginRecord(PDF , "Luoti.pdf"); 

> 

void draw() { 
background(255) ; 
fill(0); 

ellipse(x, y, 30, 30); 

x = x + random(5) ; 

y = y + random(-5 , 5) ; 

if (x - 30 > width) { 
endRecordQ ; 
exit() ; 

} 

pdf. nextPage () ; 



Olemme esitelleet muuttujan, joka varastoi pdf-dokumentin, jonka luomme. Kun olemme 
lopettaneet kuvan piirtämisen draw() -komennolla, siirrymme seuraavaan kuvaan metodilla 
pdf.nextPageQ. Ohjelma pysäytetään ja voimme avata hakemistosta tiedoston Luoti.pdf. 



PIKSELI VASTAAN VEKTORI 
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Kun piirrämme esimerkiksi neliön ruudulle, täytämme ruudun alueen pikselit tietyllä värillä. Jos 
tallennamme kuvan, voimme tallentaa jokaisen yksittäisen pikselin tietyssä kuvaformaatissa 
(JPEG, GIF, TIFF, jne.). Jos tahdomme laajentaa kuvan, tietokone ei kykene luomaan uusia 
pikseleitä vanhojen pikselien väliin ja lisäämään yksityiskohtia, koska se ei tallenna tätä tietoa 
tiedostoon. 

Jos tallennamme saman kuvan vektoriformaatissa, Processing ei enää tallenna jokaista pikseliä 
erikseen, vaan pikemminkin jokaisen piirretyn muodon ominaisuudet: sen muodon, sijainnin ja 
värin. Joten kun laajennamme kuvaa, tietokone piirtää tarkasti kuvan ominaisuudet, joita ei olisi 
voitu laajentaa pikselöidystä kuvasta. 



Edellisessä esimerkissä käytimme kirjastoa processing.pdf .*, joka voi tuoda PDF-dokumentin 
luomiseen tarkoitetun kirjaston. Kirjasto on joukko ominaisuuksia, jotka laajentavat Processingin 
mahdollisuuksia aina käyttäessämme PDF-tiedostoja ohjelmassamme, jolloin käytämme Import- 



Ce rele s PDF 
import processing.pdf.*; 

Jos yrität joskus käyttää PDF-viennin ominaisuuksia tuomatta kirjastoa, törmäät virheilmoituksiin, 
jotka ilmestyvät konsoliohjelmaan. Koodin kirjoittamisen lisäksi voit myös käyttää valikkoa 
Sketch > Import Library > PDF Export. 



TUO PDF-OMINAISUUDET 



komentoa. 



eno 



CerdesPDF | Processing 1.2.1 
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14 ■ VIEMINEN 



Toistaiseksi olemme työskennelleet ainoastaan Processing-ympäristössä. Ajamme koodirivejä ja 
suoritamme ohjelmat käyttöliittymän Run-nappulasta. Näemme, että Processingilla on kaksi 
tapaa viedä ohjelmat jaettavaksi. Yksi on animaatio, joka voidaan näyttää verkkoselaimessa, 
toinen luo ohjelman, joka voidaan ajaa VVindovvsissa, Macissa tai Linuxissa. Joka tapauksessa 
julkaisijan täytyy ajaa ohjelmasi. 

VIEMINEN VERKKOON 

Kun ohjelmasi toimii ja olet tyytyväinen, voit luoda sovelman, joka laitetaan verkkosivulle ja on 
selaimesi luettavissa. Tehdäksesi tämän voit painaa Export-nappia. 



OO HDH 



Tämä toimenpide avaa automaattisesti sovelman kansion. Siinä on monta tiedostoa. 

flOQ Dapplet 

Non 

index.html 
B loading.gif 
" MonSketch.jar 
... MonSketch java 
_ MonSketch. pde 



lndex.html on verkkosivu, joka on tehty Processingilla. Kaksoisnapsautuksella selaimesi 

laukaisee ja näyttää animaation, jonka olet juuri vienyt. 

Loading.gif on ikoni, jota käytetään ladattaessa sovelmaa verkkosivulle. 

(ohjelman nimi).jar. Jar on sovelma. Tämä on ohjelmasi versio, joka on muutettu Javaksi ja 

tallennettu kaiken tiedon kanssa. 

(ohjelman nimi).java. Java on ohjelmasi Java-versio. 

(ohjelman nimi).pde. Pde on lähdekoodi, jonka kirjoitit editoriin. 



Varoitus! Jokainen Processingin vienti ylikirjoittaa tiedostoja. Jos teet muutoksia tiedostoon, 
joudut nimeämään tiedoston (ohjelman nimi). html. 

Jos sinulla on tilaa verkossa ja tunnet FTP:n käytön, voit ladata sovelman (nimeämällä sen 
uudestaan) verkkotilaasi ja katsoa ohjelmiasi verkossa. 

OHJELMIEN VIEMINEN 

Ohjelmasi voidaan myös viedä Windowsiin, Macciin tai GNU/Linuxiin. Nyt voit kaksoisnapsauttaa 
laukaistaksesi ohjelman. Tehdäksesi tämän, napsauta valikkoa File > 
Export Application. 
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£ Processing 



■sl^fl Priit Ql/efrh 


1 UU 1 i 


New 


SN 


Open... 


SO 


Sketch book 




Exarnples 




Close 


sw 


Save 


SS 


Save As,., 


oss 


Export 


SE 


Export Application 


-frSE 


Page Setup 


OSP 


Print 


SP 



Seuraavaksi aukeaa Export Options -ikkuna. 
^' Export Options 

Export to Application creates double-clickable, 
standalone applications for the selected plaforms. 

Platforms 

□ Windows g Mac OS X □ Linux 

Options 

* k 

!~! Full Screen (Present mode] 

^ Show a Stop button 

■ v Cancel j ( Export ) 



• Kohdassa Platforms voit valita alustan ohjelmalle: Windows, Mac OS X tai Linux. 

• Full Screen (Present method) avaa ohjelman koko ruudun kokoisena, kun 
kaksoisnapsautat sitä. 

• Show a Stop button laittaa kokoruututilassa näkyville nappulan, joka lopettaa ohjelman 
ajamisen. 



Seuraavaksi ohjelma ilmestyy näkyville jokaisen käyttöjärjestelmän mukaisissa kansioissa. 
Ohjelma on kansion sisällä, se on valmis ajettavaksi koneeltasi. 

BO O □ MonSketch 



- 



Non 

► LJ applkation.linux 

► CD application.macosx 

► L_ application.winciows 

MonSketch. pde 



* * 

Vienti 

15. Äänentoisto 

16. Useamman olion animointi 

17. Olioiden animointi 

18. Aikajana 

19. Dravv-metodi 
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15 ■ ÄÄNENTOISTO 



Lähtökohtaisesti Processing on kuvan luomiseen tarkoitettu ympäristö. Sitä ei suunniteltu 
soittamaan ääntä ja vielä vähemmän kehittämään ääniaaltoja. Tätä varten on esimerkiksi Pure 
Data. Monet ulkoiset kirjastot on luotu juurikin laajentamaan äänenkäsittelymahdollisuuksia, ja 
voit liittää milloin tahansa nämä ulkoiset kirjastot ohjelmiisi: syntetisaattoreja, samplereita, 
audioliittymiä, MIDI-sekvenssereitä jne. Mutta tämä ei kuitenkaan ole Processingin perustarkoitus, 
joka on erilaisten visuaalisten muotojen luominen. 

Kuitenkin ääni on olennainen osa interaktiivisuutta, ja on vaikea kuvitella tehokasta 
interaktiivisuustyökalua ilman ääntä. 



MINIM 

Processingin jakeluversioon päätettiin liittää Minim -äänikirjasto, joka soittaa ääntä ja osaa 
tallentaa mikrofonista tulevan äänen. Tämä kirjasto on jo asennettu koneellesi. Tarkastaaksesi 
sen asennuksen ja liittääksesi sen ohjelmaasi mene hakemistoon Sketch > 
Import Library ... > Minim audio. 



Processing File Edit 


HS Tool* Help 




kun 3€ft 
Fresent frSSR 
Stop 






Import Library.*. ► 


DXF Export 






Show Sketch Folder KK 


JavaScript 






Add Flle.., 


Mlnfm Audio 








Network 
OpemCL 
PDF Export 
Serial l/O 

V,-!-:> 





Riippuen alustasta ja versiosta, Processing lisää tähän toimintoon enemmän tai vähemmän 
koodirivejä ohjelmasi alkuun. Tässä tapauksessa tarvitaan ainakin seuraava komento: 



r\ C) LectLireSon | Processing LI 



OO 1QQD 



import ddf. minim.*; 

Tämä komento tuo kaikki Minim-kirjaston toiminnot ohjelmamme käytettäväksi. Tämän 
ddf.minim.* -kirjaston avulla soitamme äänetä ohjelmassamme. 



LectureSon S 

import ddf.minim.*; 



MINIM-ASETUKSET 



Kun ajamme ohjelmamme Run-napin avulla, meidän täytyy aktivoida äänikone Minim. Tämän 
esimerkin pitäisi pyytää pääsyä äänikorttiin käyttöjärjestelmän kautta, jotta ohjelma voi soittaa 
ääniä. Tämä merkitsee, että ohjelman lopussa voimme myös sulkea Minim-kirjaston. 
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Ei haittaa, vaikka et vielä ymmärtäisi kaikkea sanomaamme. Olennaista on se, että jokaisen 
Minimiä käyttävän ohjelman alussa tulee olla seuraava koodi: 



import ddf . minim. *; 

Minim minim; 

void setup() { 

minim = new Minim(this); 

} 



Ohjelman loppuun tulee myös kirjoittaa muutama rivi: 

void stop() { 
minim. stop() ; 
super . stop() ; 

} 



Mikä sana "this" on ohjelmassamme? Sana "this" tarkoittaa tätä ohjelmaa. Minimin täytyy tietää 
tämän ohjelman osoite, jotta se voi kommunikoida ohjelman ja äänikortin kanssa. Tätä ei tarvitse 
ymmärtää vielä. Nämä ovat vain taikasanoja, jotka täytyy sanoa jokaisen ääntä käyttävän 
ohjelman alussa ja lopussa. 

ÄÄNEN TUOMINEN 



Tuomme kuvan ohjelmaamme aivan kuin kuvan tai kirjasintyypin. Kannattaa tallentaa ohjelma 
ennen tätä askelta. 



Ääni voi tulla monesta eri lähteestä: ne voidaan ladata netistä, tehdä Audacityllä, ja on jopa 
ääniä, jotka voivat olla osa käyttöjärjestelmääsi. 



Etsi nyt äänitiedosto ja vedä se suoraan Processing-ikkunaan: 
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Tämä toiminto laittaa äänitiedoston hakemistoon "data" ohjelmassasi. Jos tahdot nähdä tämän 
tiedoston, paina ctrl-k (Windows / Linux) tai cmd-k (Mac), muuten voit valita valikosta Sketch > 
Show Sketch Folder. 



ÄÄNITIEDOSTOT 



Voit käyttää kolmea ääniformaattia Minimin kanssa: WAV, AIFF ja MP3. Kaksi ensimmäistä 
formaattia voidaan viedä oletusarvoisesti ilmaisella ohjelmalla, kuten Audacityllä. Kolmas 
formaatti vaatii lisäosan Audacityssä, mutta se on melko helppo asentaa. 

Kuten kuvien tapauksessa, eri formaateilla on etunsa ja haittansa. 

1. WAV ja AIFF -tiedostot ovat melkein identtisiä ja molemmat formaatit ovat 
pakkaamattomia. Niitä Minim voi lukea ilman suurempia hankaluuksia, koska niitä ei 
tarvitse purkaa. Niitä käytetään usein lyhyisiin ääniin, kuten ääniefekteihin. Molemmat 
formaatit ovat paljon isompia kuin vastaavan pituiset MP3-tiedostot. 

2. MP3-formaatti on pakattu formaatti. Se on usein paljon lyhempi kuin WAV ja AIFF. MP3- 
toisto vaatii enemmän tietokojenkäsittelytehoja koneelta, koska tiedosto täytyy purkaa, 
kun se soitetaan. 



Tässä on yksinkertainen ohjelma, joka näyttää ellipsin tietokoneesi kellon sekunneilla. Käytämme 
tätä ohjelmaa pohjana luodaksemme kelloäänen, joka soi joka minuutti. Koska minuutin odottelu 
on pitkä aika, esitämme sekuntien kulumisen ellipsillä, joka kasvaa kuvan keskellä. 



void draw() { 
background(255) ; 

ellipse(50,50, second() , second() ) ; 

} 

Tehdäksemme kellomme käytämme yksinkertaisesti järjestelmän kellon sekunteja 
asettaaksemme ellipsin parametrit (korkeus, leveys). Jos sekuntiarvo on 42, meillä on 42 x 42 
kokoinen ellipsi. Jos sekunnit ovat 2, meidän ellipsimme on 2 x 2 pikseliä. 

Voisimme lisätä uuden ehdon, jolla osoitamme minuuttien muutoksen aina kun sekunnit ovat 
nollassa. Tällöin ruutu on punainen. 



KELLO 
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Letit... 




void draw() { 

if (second() == 0) { 

background(255,0,0) ; 
} else { 

background(255) ; 

} 

ellipse(50, 50, second() , second()) ; 

} 

Ehto if (second () == 0) {} vertailee jälkimmäistä arvoon 0. Jos molemmat vastaavat toisiaan, 
tausta on punainen, muuten tausta on valkoinen. 

KELLON ÄÄNI 



Meillä on nyt ohjelmassa ääni, joka toistetaan aina kellon sekuntien ollessa kohdassa 0. 

Aloittaaksemme piirrämme kellon dravv () -metodissa. Kaikki ääneen tarvittavat metodit ovat 
tässä osassa. 



import ddf.minim.*; 

Minim minim; 
AudioSnippet ping; 

void setup() { 

minim = new Minim(this); 

ping = minim.loadSnippetCping.wav"); 

} 

void draw() { 

if (second() == 0) { 

if (ping. isPlaying() == false){ 
ping.playO ; 

} 

background(255,0,0) ; 

} else { 

background(255) ; 

} 

ellipse(50, 50, second () , second ()) ; 

} 

void stop() { 
ping. close() ; 
minim. stop() ; 
super . stop() ; 

} 
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Minim minim; 
AudioSnippet ping; 



void setup( ) { 
£jf minim = new Ninim(this); 

ping = minim.loadSnippetCping.wav 11 ); 



} 

void draw() { 

if (second() == 9) { 



if (ping.isPlaying( ) == fälse)| 
ping.pl ay(); 

} 

bäckground(255,8,8); 

} else { 

bäckground(255); 

} 

ellipseCSS^SjSecondC ),second( )); 



void stop() { 

ping.closeC); #J 

© 

} 



minim. 3top( ); 
3uper.3top( ); 



Tämä ohjelma vaatii monta askelta toimiakseen: 



1. Tuodaan Minim ohjelmaan. 

2. Luodaan kaksi muuttujaa, joista toinen sisältää Minim-koneen ja toinen äänidataa. 

3. Käynnistetään kone Minimin alettua. 

4. Kopioidaan data muuttujaan äänitiedostosta. 

5. Ehdollisesti soitetaan ääni ja näytetään punainen ruutu, kun sekunnit ovat nollassa 
(tarkastetaan ettei ääni ole jo soimassa). 

6. Piirretään ellipsi kellon sekuntien pohjalta. 

7. Lopetetaan ääni ohjelman lopussa. 

8. Lopetataan Minim ohjelman lopussa. 
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Olemme jo selittäneet Minim-koneen käynnistämisen ja lopettamisen. Tässä tulee kiinnittää 
huomio ohjelman osiin 2, 4 ja 5, jotka kuvaavat tuonnin ja toiston. 

Ensin luomme muuttujan tyyppiä AudioSnippet. AudioSnippet -tyyppi on muuttuja, joka on 
määritelty Minimin koodissa. Muistutamme, että jokaisen muuttujan tapauksessa kaava on 
tyyppiä (tyyppi)(muuttujan nimi) = (muuttujan arvot). Jos on esimerkiksi mahdollista tuoda 
Processingiin söpö pieni lintu, riittää kirjoittaa PikkuLintu loadLintu = ("lintu. bird"). Kirjoitamme 
ensin olion tyypin, sen nimen, ja lopulta sen arvon. Tässä arvo annetaan funktiolle loadSnippet(), 
joka hakee vvave-äänitiedoston arvot ja tuo ne muuttujaan nimeltä "ping". 

Lisätietoa muuttujista ja erilaisista muuttujatyypeistä saat aiheelle omistetusta luvusta. 

Kun muuttujaan on ladattu ääni, voit vain toistaa sen. AudioSnippetin soittamiseksi kutsutaan 
komentoa play(). Tässä voidaan myös kysyä onko ääni jo toistettavana, jolloin komento isplaying 
kertoo meille toistuuko ääni jo (true) vai eikö toistu (false). Jos tämä komento unohdetaan, 
komento laukaistaan monta kertaa metodin secondf) ollessa nollassa. 

AUDIOSNIPPET, AUDIOSAMPLE, AUDIOPLAYER 

Minimin dokumentaation mukaan Processingissa on monta tapaa soittaa ääniä. Periaatteessa 
valintasi perustuu äänen rooliin ohjelmassasi. Minimin dokumentaation mukaan AudioSnippetiä 
käytetään lyhyen äänen soittoon, AudioSamplea nopeaan toistuvan äänen lukemiseen, 
esimerkiksi rumpukoneen äänen, ja AudioPlayer on käytössä pidempien äänien (usein MP3) 
tapauksessa. Nämä pidemmät äänet toistetaan suoraan kovalevyltä, jotta vältetään ohjelman 
sisäisen muistin käyttöä. Tässä on esimerkki, joka käyttää kaikkia kolmea toistotapaa. 

import ddf . minim. *; 

Minim minim; 
AudioSample ping; 
AudioSnippet pop; 
AudioPlayer song; 

void setup() { 

minim = new Minim(this); 
ping = minim. loadSample("ping. aiff") ; 
pop = minim. loadSnippet ("pop . aiff ") ; 
song = minim. loadFile("song. mp3") ; 

} 

void draw() { 
} 

void keyPressedO { 

if (key == 'a') ping. trigger() ; 
if (key == 'b') { 

pop . rewind () ; 

pop.play() ; 

} 

if (key == 'c') song.play(); 

} 

void stopQ { 
ping. closeQ ; 
pop. closeQ ; 
song. closeQ ; 
minim. stop() ; 
super . stop() ; 

} 

Huomaa, että AudioPlayer ja AudioSample käyttävät molemmat playO-metodia, koska niiden 
lukema on aina ainutlaatuinen (yksi ääni kerrallaan). AudioSample vaatii monen samanaikaisen 
äänen lukemista ja käyttää komentoa trigger äänen laukaisemiseen. Englanniksi sana "trigger" 
tarkoittaa liipaisinta. 
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DOKUMENTAATIO 

Minimistä löytyy lisää tietoa sivulta http://code.compartmental.net/tools/Min/ ja vaikeampaa 
teknistä dokumentaatiota sivulta 

http://code.compartmental.net/minim/iavadoc/ddf/minim/package-tree.html . 
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16- USEAMMAN OLION ANIMOINTI 



Olioista koostuvan ohjelman oliomäärä voi lisääntyä nopeasti. Olioihin johdattelevassa luvussa 
näimme, että voimme laittaa ruudulle kaksi palloa ja laittaa siirtovuoron metodiin draw(). Tämä 
voi olla hankala toimintatapa, kun kohteita tarvitaan yli kaksi. 

Tässä kappaleessa jatkamme pomppoilevan pallon esimerkillä. Lisäämme enemmän palloja, 
käytämme listoja, jonka jälkeen lisäämme metodin käsittelemään pallojen törmäyksiä toisiinsa. 




KOODIPOHJA 

Aloituspisteenä on koodi luvusta "Olion animointi". Luvun koodi antaa meidän laittaa ruudulle 
pomppivan pallon. Proseduurin kuluessa lisäämme koodinpätkiä vanhaan esimerkkiin. Uudet 
koodinpätkät näytetään lihavoituna ja merkittyinä kommentteina// LISÄÄ tai // LISÄYKSEN ALKU 
ja // LISÄYKSEN LOPPU. Voit myös kopioida koko koodiblokin ja korvata kyseessä olevan luokan 



tai metodin. 




//Julista ja luo olion instanssi Pallo 

Pallo myPallo = new Pallo(100, 100, color(255)); 



void setup() { 
smooth() ; 

size(400, 200); //Ikkunan koko 

} 

void draw() { 

fill(0, 0, 0, 1); // Läpinäkyvä väri 
rect(0, 0, width, height) ; 

noStroke() ; 

//Pallon liikuttaminen ja näyttäminen 

myPallo.moveO ; 

my Pallo. testCollision () ; 

myPallo . display () ; 

} 

class Pallo { 

//Pallon perusparametrien julistus 
float x; 
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float y; 
float speedX; 
float speedY; 
color col; 

//Pallon rakennus 

Pallo (float newX, float newY, color newColor) { 
x = newX; 

y = newY; 

col = newColor; 

speedX = 2; 
speedY = 2; 

} 

//Piirrä pallo 
void display() { 
fill(col); 

ellipse(x, y, 40, 40); 

} 

void moveQ { 
x = x + speedX; 
y = y + speedY; 

} 

void testaaTormaysQ { 

//Jos pallo osuu seinään se pompahtaa 
if (x > width-20 | | x < 20) { 
speedX = speedX * -1; 

} 

if (y > height-20 | | y < 20) { 
speedY = speedY * -1; 

} 

} 

} 



LISTAA PALLOT 



Voimme nyt käyttää listan konseptia pomppivaan palloon. Tämän avulla meillä voi olla monta 
palloa ruudulla, ilman että joudumme kopioimaan koodia! 

Ensin julistamme listan palloja yhden pallon sijasta. Käytämme muuttujaa palloLaske laskemaan 
ohjelmassa olevien pallojen määrän. 

Korvaamme seuraavan koodin 

Pallo myPallo = new Pallo(100, 100, color(255)); 
tällä koodilla: 

//Julista pallojen määrän sisältävä muuttuja 
int palloLaske = 3; 

//Julistetaan pallon instanssien määrän sisältävä muuttuja 
Pallo[] pallot = new Pallo[palloLaske] ; 

Kuten kokonaislukuja käsittelevässä esimerkissä, meidän täytyy vain julistaa mallipallon kopiot. 
Ne täytyy nyt luoda komennossa setup (). Luomme kolme palloa ruudun keskelle. Kaikki kolme 
ovat valkoisia. 

void setupQ { 
smoothO ; 

size(400, 200); //Ikkunan koko 
//Lisäys alkaa 

//Tämä silmukka luo kolme palloa 

//Valkoista ruudun keskellä 

for (int i = 0; i < palloLaske; { 

pallotCi] = new Pallo(width/2 , height/2, color(255)); 

} 

//Lisäys loppuu 
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Metodissa dravv () luomme myös silmukan, joka käy läpi kaikki elementit siirtääkseen niitä, testaa 
niiden törmäykset ja näyttää ne. Korvaamme koodin 

//Liikuta palloa ja näytä 
myPallo . move () ; 
my Pallo . testaaTormays() ; 
myPallo. display() ; 



tällä koodilla: 

//Tämä silmukka liikuttaa ja näyttää kolmea palloa 
for (int i = 0; i < palloLaske; { 

pallot[i] . moveQ ; 

pallot [i ] . testaaTormays() ; 

pallot[i] . display () ; 

} 

Lopullisena operaationa on muokata mallia pallosta, jotta jokaisella pallolla on oma nopeutensa ja 
suuntansa. Tehdäksemme tämän käytämme funktiota random(). Korvaamme seuraavan koodin 

//Pallon luominen 

Pallo (float newX, float newY, color newColor) { 
x = newX; 

y = newY; 

col = newColor; 

speedX = 2; 
speedY = 2; 

} 

tällä koodilla: 

//Pallon luominen 

Pallo (float newX, float newY, color newColor) { 
x = newX; 

y = newY; 

col = newColor; 
speedX = 2 + random(-l , 1) ; 
speedY = 2 + random(-l , 1) ; 

} 



LOPULLINEN OHJELMA 



Tässä on lopullinen ohjelma, jossa on eri arvot muuttujalle ballCount. 

//Pallojen määrän sisältävän muuttujan julistaminen 
int laskePallo = 3; 

//Pallon instanssit sisältävän listan julistaminen 
Pallo[] pallot = new Pallo[palloLaske] ; 

void setupQ { 
smooth() ; 

size(400, 200); //Ikkunan koko 

//Tämä silmukka luo kolme valkoista palloa 
//Ikkunan keskelle 

for (int i = 0; i < palloLaske; { 

pallotCi] = new Pallo(width/2, height/2, color(255)); 

} 



void draw() { 

fill(0, 0, 0, 1); // Väri on läpinäkyvä 
rect(0, 0, width, height); 

noStroke() ; 

//Tämä silmukka luo ja näyttää kolme paloa 
for (int i = 0; i < palloLaske; { 

pallotCi] . move() ; 

pallot[i] . testaaTormays() ; 

pallot[i] . display () ; 

} 

} 
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class Pallo { 

//Pallon parametrien julistaminen 

float x; 

float y; 

float speedX; 

float speedY; 

color col; 

//Pallon luominen 

Pallo (float newX, float newY, color newColor) { 
x = newX; 

y = newY; 

col = newColor; 

speedX = 2 + random(-l , 1) ; 
speedY = 2 + random(-l , 1) ; 

} 

//Pallon suunnittelu 
void display() { 
fill(col); 

ellipse(x, y, 40, 40); 

} 

//Pallon liike 
void moveQ { 

x = x + speedX; 

y = y + speedY; 

} 

void testaaTormaysQ { 

//Pallo pompsahtaa muurista 
if (x > width-20 | | x < 20) { 
speedX = speedX * -1; 

} 

if (y > height-20 | | y < 20) { 
speedY = speedY * -1; 

} 

} 

} 
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17. OLIOIDEN ANIMOINTI 



Olioiden animointi on näyttämö, jolle voimme ajatella laajempia käyttötarkoituksia. Olion 
animointi merkitsee toimintojen lisäämistä malliin: liike, pomppoilu, törmäysten testaus jne. Tämä 
luku näyttää esimerkkejä luvussa Oliot luodun pallon käsittelystä ja sen pomppoiluttamisesta 
ruudun neljän reunan välillä. 

Lopputulos on kuin seuraavassa kuvassa. Laitamme viivästysefektin näyttääksemme pallon 
liikeradan. 




KOODIPERUSTA 

Alkupisteeksi otamme pallon koodin luvusta Kohteet. Se antaa meidän nähdä pallon ruudulla. 
Tämän proseduurin kuluessa lisäämme koodinpätkiä perusesimerkkiin. Uudet osat näytetään 
paksulla ja niissä on kommentit //LISÄÄ tai // LISÄYS ALKAA ja // LISÄYS LOPPUU. Voit myös 
kopioida koko koodiblokin ja korvata kyseessä olevan luokan tai metodin. 




//Yhden pallon instanssin julistaminen 

Pallo myPallo = new Pallo(100, 100, color(255)); 

void setup() { 
smooth() ; 

size(400, 200); //Ikkunan koko 

} 

void draw() { 

background(0) ; //Mustan taustan luominen 
noStroke(); //Ei ääriviivaa 

myPallo. display() ; //Näytetään pallo 

} 

class Pallo { 

//Pallon ominaisuuksien julistus 
float x; 
float y; 
color col; 

//Pallon luominen 
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Pallo (float newX, float newY, color newColor) { 
x = newX; 

y = newY; 

col = newColor; 

} 

//Pallon suunnittelu 
void display() { 
fill(col); 

ellipse(x, y, 40, 40); 

} 



LIIKE 

Pallon täytyy liikkua x- ja y- akseleita pitkin. Luomme kaksi muuttujaa malliin ja olion toimintaa 
edustaa sen nopeus akseleita x ja y pitkin. Tämän jälkeen lisäämme olioon uuden metodin 
move(), jota kutsutaan ohjelman metodista draw(). Tämä metodi tulee kuitenkin, aina oliota 
näytettäessä, muuttamaan pallon sijaintia suhteessa sen nopeuteen. Se alustaa myös 
konstruktorin nopeuden kuvaavat muuttujat. Aluksi annamme niille pysyvän arvon. 

class Pallo { 

//Pallon ominaisuuksien julistus 
float x; 
float y; 

float speedX; //LISÄÄ 
float speedY; //LISÄÄ 
color col; 

//Pallon rakentaminen 

Pallo (float newX, float newY, color newColor) { 
x = newX; 

y = newY; 

col = newColor; 

speedX = 2; //LISÄÄ 
speedY = 2; //LISÄÄ 

} 

//Pallon suunnittelu 
void display() { 
fill(col); 

ellipse(x, y, 40, 40); 

} 

//LISÄYS ALKAA 
void move() { 

x = x + speedX; 

y = y + speedY; 

} 

//LISÄYS LOPPUU 



Se kutsuu metodia move() metodista draw(). Voimme lisätä kutsun komentoon background 
pyyhkiäksemme ruudun jokaisen uuden kuvan jälkeen. 

void draw() { 

background(0) ; //Mustan taustan luominen 
noStrokeO; //Ei ääriviivoja 

//Pallon liikuttaminen ja näyttäminen 
myPallo.move() ; //LISÄÄ 
myPallo. display() ; 



TÖRMÄYKSET 

Tällä hetkellä pallo jatkaa liikettään törmätessään ruudun seinään. Pallo pitäisi saada 
poukkoilemaan seinistä, joten lisäämme metodin testaaTormays, joka kääntää pallon 
liikesuunnan sen osuessa seinään. 

class Pall { 

//Pallon ominaisuuksien julistaminen 
float x; 
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float y; 
float speedX; 
float speedY; 
color col; 

//Pallon luominen 

Pallo (float newX, float newY, color newColor) { 
x = newX; 

y = newY; 

col = newColor; 

speedX = 2; 
speedY = 2; 

} 

//Pallon suunnittelu 
void displayQ { 
fill(col); 

ellipse(x, y, 40, 40); 

} 

void moveQ { 
x = x + speedX; 
y = y + speedY; 

} 

//LISÄYS ALKAA 

void testaaTormaysQ { 

//Pallo pomppaa törmätessään seinään 

if (x > width-20 | | x < 20) { 
speedX = speedX * -1; 

} 

if (y > height-20 | | y < 20) { 
speedY = speedY * -1; 

} 

} 

//LISÄYS LOPPUU 



Nyt lisätään kutsu metodiin testaaTormays metodista draw(). 

void draw() { 

//Korvataan komennolla background () näille kahdelle riville 
fill(0, 0, 0, 1); // Läpinäkyvä väri 
rect(0, 0, width, height) ; 
noStroke() ; 

//Pallon liikuttaminen ja näyttö 
myPallo.moveO ; 

myPallo. testaaTormays() ; //LISÄÄ 
myPallo. display() ; 



LOPULLINEN KOODI 



Tässä on lopullinen koodi kaikkien näiden muutosten jälkeen. 

//Yhden olion pallo instanssin luominen 

Pallo myPallo = new Pallo(100, 100, color(255)); 

void setup() { 
smoothO ; 

size(400, 200); //Ikkunan koko 

} 

void draw() { 

fill(0, 0, 0, 1); 

rect(0, 0, width, height); 

noStroke() ; 

//Pallon näyttö ja liikuttaminen 
myPallo . move () ; 
myPallo. testaaTormays () ; 
myPallo. display() ; 

} 

class Pallo { 

//Pallon luokan ominaisuuksien julistaminen 
float x; 
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float y; 

float speedX; 

float speedY; 

color col; 

//Pallon luominen 

Pallo (float newX, float newY, color newColor) { 
x = newX; 

y = newY; 

col = newColor; 

speedX = 2; 
speedY = 2; 

} 

//Pallon suunnittelu 
void displayQ { 
fill(col); 

ellipse(x, y, 40, 40); 

} 

void moveQ { 
x = x + speedX; 
y = y + speedY; 

} 

void testaaTormaysQ { 

//Pallo pomppaa törmätessään muuriin 
if (x > width-20 | | x < 20) { 
speedX = speedX * -1; 

} 

if (y > height-20 | | y < 20) { 
speedY = speedY * -1; 

} 

} 

} 
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18 ■ AIKAJANA 



Animaatiota luotaessa tarvitaan liikettä. Liike merkitsee muutosta ajan kuluessa. Sijainti, väri tai 
joku muu asia voi muuttua. Tieto muutoksesta voidaan tallentaa muuttujiin. 

Animaatioita luotaessa sinun tulee tietää, missä järjestyksessä asiat tapahtuvat aikajanalla. 
Voimme käyttää joko oikeaa aikaa tai laskea esimerkiksi yhdestä kymmeneen. 

PALJONKO KELLO ON? 

Voimme luoda kellon kutsumalla Processingissa metodeita hour(), minutes() ja second(). 
Käytämme ulostuloa muuttaaksemme kolmen ohuen neliön sijaintia horisontaalisella akselilla. 




Tässä on koodi hyvin yksinkertaisen kellon luomiseen: 

void setupQ { 
size(60, 60); 
noStroke() ; 

} 

void draw() { 
background(0) ; 

// Tunnit ovat 0-23 

// Muunnamme skaalalta 0-60 

rect((hour() / 24.0) * 60, 0, 1, 20); 
rect(minute() , 20, 1, 20); 
rect(second() , 40, 1, 20); 

} 

Tässä esimerkissä kuvat piirretään toistensa päälle. Metodin background() kutsuminen piirtää 
kuvat toistensa päälle. Komento backgroundf) täyttää piirroksen määritellyllä värillä, jotta kuva 
poistetaan. 

MITTAA AJAN KULUMINEN 

Saat ohjelman suorittamisen aloitushetkestä kuluneen ajan komennolla millis(). Se palauttaa ajan 
millisekunteina. Voimme luoda animaatioita käyttäen tätä arvoa. Sekunnissa on tuhat 
millisekuntia. Tämä antaa meille melko korkean tarkkuuden muotoja animoitaessa. 

Jotta animaatiot toimivat, voit käyttää modulo-operaattoria (%), josta saat jakojäännöksen. 
Esimerkiksi komento System. out. println(109% 10); näyttää tuloksen 9, sillä 109 jaettuna 
kymmenellä antaa 10 ja 9 jakojäännökseksi jää 9. Vastaavasti kahden numeron x ja y ottaminen, 
ja jakaminen numeroilla x ja y, antaa jakojäännöksen, joka on vähemmän kuin y. Modulo antaa 
meidän laskea ja olla koskaan ylittämättä tiettyä numeroa. 

Seuraavassa esimerkissä piirrämme ympyrän, joka kulkee hyvin nopeasti vinossa suunnassa. 
Tämä ympyrä jättää jälkeensä vanan, joka katoaa hyvin hitaasti. 



62 



Tässä on koodi, jota käytetään sen piirtämiseen. 

void setup() { 
size(320, 240); 
noStroke() ; 
frameRate(60) ; 
smooth() ; 

} 

void draw() { 

fill(0, 0, 0, 10); 
rect(0, 0, width, height) ; 
fill(255); 

ellipse(millis() % width, millis() % height, 20, 20); 

} 

Sen sijaan että kutsuttaisiin komentoa background(), piirrämme neliön osittain läpinäkyvänä. 
Tämä tekee liikkeen sumennuksen. Kutsumme komentoa smooth(), koska rakastamme tasaisia 
kurveja. 

On paras tehdä toiminnot ajan perusteella eikä laskea piirrettyjä kuvia. Tämä johtuu siitä, että 
renderöintinopeus riippuu koneesta ja sillä pyörivistä muista ohjelmista. Animaatioista tulee 
nykiviä, jos käytämme mittarina laskuria eikä aikaa. Katsomme kuitenkin animaatioiden 
tekemistä laskurilla, koska se on hyvin helppoa. 



ANIMOI LASKURILLA 

Näemme nyt, kuinka animaatio tehdään laskurilla. Piirrämme yhden viivan, joka liikkuu jatkuvasti. 




Koodi on melko yksinkertaista. Avain on kuvien laskenta. Muutamme viivan pyörimistä 
laskemalla kuvan renderöintikertoja. 

int laskin; 
void setupQ { 
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size(320, 240); 
frameRate(60) ; 
fill(0, 0, 0, 10); 
stroke(255) ; 
smooth() ; 
laskin = 0; 



void draw() { 

frame = f räme + 1; 

rect(0, 0, width, height) ; 

translate(width / 2, height / 2); 

rotate(radians(f räme)) ; 

line(-height , -height, height, height); 



Julistetaan laskuri. 

int laskin; 

Laskuri initialisoidaan komennossa setup (). 

void setupQ { 
size(320, 240); 
frameRate(60) ; 
fill(0, 0, 0, 10); 
stroke(255) ; 
smooth() ; 
laskin = 0; 



Jokaisessa dravv () -metodikutsussa yksi lisätään muuttujaan frame. 

frame = frame + 1; 

Tämän jälkeen voit siirtää piirroskohdan piirrosavaruuden keskustaan ja pyörimisliike riippuu 
ruudusta. 

translate(width / 2, height / 2); 
rotate ( rad ia ns (frame)) 
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19 ■ DRAVV-METODI 



Toistaiseksi olemme luoneet lineaarisia ohjelmia: ohjelma alkaa, se piirtää piirroksemme ja loppuu 
komentojen loputtua. 

Processing ei kuitenkaan ole pelkkä piirrosympäristö, se on myös interaktiivinen ympäristö. 
Interaktiivisuus vaatii aikaa, sillä ympäristö muuttuu ajan kuluessa ja eri seikkojen vaikuttaessa 
siihen. Tähän tarvitaan loputonta silmukkaa, jota ohjelma kutsuu jatkuvasti päivittääkseen 
grafiikkaa. Processingissa tämä loputon silmukka on komento draw(). Siihen liittyy usein metodi 
setupO, joka valmistelee kuvan, esimerkiksi asettamalla sen koon heti alussa. 

Näiden kahden metodin puute tekee Processingista epäaktiivisen. Jos koodissa ei ole metodia 
draw(), ohjelma loppuu koodin loppuessa. 

DRAW() 

Aloita uusi tyhjä Processing-ohjelma, kirjoita seuraavat rivit skripti-ikkunaan, ja paina play - 
nappia: 

void draw() { 

background( random(255) ); 

} 

OK, olet mahdollistanut animaation Processingissa. Sinun pitäisi nähdä ikkuna, joka välähtää 30 
kertaa sekunnissa satunnaisessa harmaan sävyssä jossain mustan ja valkoisen välillä. Tämä on 
metodi random (255), joka antaa satunnaisia arvoja väliltä 0-255. Tämä arvo haetaan sen jälkeen 
taustalle komennolla backgroun (). Koska kaikki tapahtuu toistuvasti, päivittyy kuva kuin 
elokuvassa. 




Oletusarvoisesti komennot, jotka ovat kahden dravv-komennon aaltosulun välissä, suoritetaan 30 
kertaa sekunnissa. Processing avaa tämän metodin 30 kertaa sekunnissa ja katsoo mitä sisällä 
on. Voimme laittaa tämän metodin sisään niin monta komentoa kuin tahdomme. Nämä 
komennot Processing toistaa loputtomasti. 

Varo kirjoitusvirheitä tai Processing lopettaa toiston - mikä on animaatiosi loppu. Jos olet 
kuitenkin kirjoittanut komennon draw() ilman virheitä, se kutsuu silmukkaa 30 kertaa sekunnissa, 
kunnes käyttäjä lopettaa ohjelman, sähköt katkeavat, tai maailma loppuu. Niinpä voimme luoda 
animaatioita tällä koodin luomisen menetelmällä. 

SUORITUSTAAJUUS 

On mahdollista määritellä eri taajuus käyttämällä metodia frameRateQ. 
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Jos muutat edellistä esimerkkiä seuraavasti, huomaat nopeuden hidastuneen kolmasosaan 
aiemmasta. 

void draw() { 
f rameRate(10) ; 
background( random(255) ); 

} 

KUINKA MONTA KERTAA DRAVV () KUTSUTTIIN 

Processing voi myös laskea kuinka monta kertaa metodi dravv () on kutsuttu ohjelman 
käynnistämisestä alkaen muuttujalla frameCount. 



FrameCount | Processing 1.1 



OO IIE3E3Q 


FrameCount 







SETUP 0 

Usein joudumme myös kirjoittamaan ohjeet vain ohjelman alkuun. Voimme esimerkiksi määritellä 
kuvan koon vain kerran, ja tätä määritelmää ei sijoiteta komennon draw() alkuun, koska draw() 
suoritetaan jatkuvasti. Processing anta meille oletusarvoisen kuvan, jonka koko on 100x100 
pikseliä, ja voimme muuttaa sen asetuksia. 

Näistä syistä on luotu täydentävä komento: metodi setup(). 

void setup() { 
} 

Tämän metodin lovien yskittäisten merkkien hienoudet eivät ole tärkeitä tässä vaiheessa. Sinun 
pitää vain tietää, että alkuun pitää kirjoittaa void setupO, jota seuraa aaltosulku, käyttämäsi 
komennot, ja lopulta toinen aaltosulku. 

void setup() { 
size(500, 500); 

} 

void draw() { 

background(random(255)) ; 

} 
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Tämän jälkeen Processing katsoo metodin sisälle joka kerralla, kun ohjelma suoritetaan. Kun 
nämä komennot on suoritettu, Processing kutsuu metodia draw(), joka toistetaan uudestaan ja 
uudestaan. 



□ 



10 ES EE] 



frarre 1 



frairc 3 



setupQ 



c - : i '; 



dravvQ 




drawQ 



I^ESESI^ 



// execute une seule Fols 
// ciu denarrage du prc-gronnc 

snccthQ; 




// execute n chaque appel de 
// dravvQ 

f UI (255); 

f Liat r = rarcsn(50,lW); 
eLllpse(inou5eX,nx>u5eY,r,r); 



BACKGROUNDO 

Tässä on ohjelma, joka täyttää ruudun ellipseillä. 




void setup() { 
size(200, 200); 
fill(0); 

} 

void draw() { 

ellipse(random(200) , random(200), 20, 20); 

} 

Kuten ruutukaappauksesta näkyy, tämä elokuva täyttää kuvamme kokonaan mustalla. 

Lisää vain ohjelmaan puhdas taustakuva, käyttäen metodia backgroundf). Se ottaa yhdestä 
kolmeen väriarvoa, kuten metodit fillQ tai strokeQ. 



Tässä on ohjelman muunnos, jossa näemme nyt yhden animoidun muodon: 

void setup() { 
size(200, 200); 
fill(0); 

} 

void draw() { 

background(255) ; 

ellipse( 100, 100, random(100), random(100)) ; 

} 

Todellisuudessa tyhjennämme ruudun 30 kertaa sekunnissa, jonka jälkeen se piirtää ellipsin 
taustalle. 

LISÄÄ SULATUS 



Tätä temppua käytetään usein Processingissa. Kuvan tausta pyyhitään, mutta jäljelle jätetään 
osittain läpinäkyvä neliö, johon piirretään komennolla. 



W ^ background 



void setup() { 
size(200,200) ; 
background(0) ; 
noStroke() ; 

} 

void draw() { 

fill(0, 0, 0, 20); 
rect(0, 0, 200, 200); 
fill(255); 

ellipse(100 + random(-20, 20) , 100 + random(-20 , 20) , random(50) , random(50) ) ; 

} 

Animaatio 

20. Kommentit 

21. Oliot 

22. Metodit 
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23. Listat 

24. Toistaminen 

25. Ehdot 

26. Muuttujat 



20 - KOMMENTIT 



Koodin dokumentointi on tärkeää, jotta muut voivat korjata ja laajentaa koodia. Se mahdollistaa 
myös tietyn muuttujan tai metodin käytön tutkimisen. Kun ohjelmaa kirjoitetaan, ovat 
kommentit sen dokumentointi. Joskus kommentit näyttävät turhilta, mutta jos tahdot käyttää 
koodia uudestaan, kommenttien käyttö tekee siitä paljon helpompaa. 

Processing tarjoaa kaksi tapaa kommentoida koodia: kommentit riveillä ja monen rivin 
kommenttiblokit. 

YHDEN RIVIN KOMMENTIT 

Vain yhden rivin kommenttien kirjoittamista varten voit laittaa merkit // kommentin alkuun. 
Kaikki näistä merkeistä oikealle oleva teksti lasketaan kommentiksi: sitä ei oteta huomioon 
ohjelmaa suoritettaessa. Esimerkkejä kommenteista riveillä: 

void setupQ { 

// Määritellään ikkunan koko 
size(400, 300); 

smoothO; // Aktivoidaan ääriviivojen siistiminen 

} 

KOMMENTTIBLOKIT 

Jos selitys vaatii pidemmän kommentin, se voidaan kirjoittaa useammalle riville laittamalla ne 
merkkien "/*" kommentti "*/" väliin. Esimerkiksi: 

/* 

Metodi alustaa ohjelman setupQ, 
voimme määritellä ikkunan koon, 
asettaa ohjelman alkutilan jne. 

*/ 

void setup() { 
} 

Voit kommentoida rivin menemällä edit-valikkoon ja napsauttamalla "comment/uncomment" - 
nappia. Voimme tehdä saman poistaaksemme kommenttiblokin. 

KOMMENTTIEN KÄYTTÖ 

Ohjelman kommentointi ei merkitse jokaisen rivin merkityksen selittämistä! Yleensä 
kommenttiblokki selittää metodien käyttötarkoituksen ja -tavan. Tämä vaatii jättämään 
tavalliset Processingin komennot selittämättä: esimerkiksi setupO, draw() jne. voidaan jättää 
selittämättä. Yleisiä komentoja ei tarvitse kommentoida. Esimerkiksi size(), fill() ja ellipse() ovat 
ilmeisiä. 

Kun ohjelman rivit tekevät yhteisen kommentin, kannattaa laittaa erillisten kommenttien sijasta 
yksi kommentti. Esimerkiksi: 

x = x + 10; //Lisätään 10 koordinaattiin x 
y = y + 10; //Lisätään 10 koordinaattiin y 

Voitaisiin kirjoittaa: 

//Koordinaattien x ja y muokkaaminen 
x = x + 10; 
y = y + 10; 
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21. OLIOT 



Olio-ohjelmoinnissa ohjelma rakennetaan elementeistä, jotka ovat olemassa ohjelmassa (luodit, 
seinät, hahmot...). Olio on malli, joka voidaan kopioida, ja jonka jokainen kopio on yksilöllinen, ne 
ovat sovelluksen rakennuspalikoita. Olio rakentuu ominaisuuksista ja metodeista. Jokainen olion 
instanssi omaa erilaiset ominaisuudet, mutta sillä on käytössään samat metodit. 

Tässä luvussa näytämme objektien käsittelyn ja piirrämme kaksi palloa (yksinkertaista ympyrää) 
ruudulle Tässä esimerkissä on pallon malli (olio) ja sen kopiot (instanssit), joista jokaisella on 
erilaiset oinaisuudet. 

Pallon malli rakentuu ominaisuuksista (muuttujista) seuraavasti: 



x - sijainti x-akselilla. 
y - sijainti y-akselilla. 
col - värit. 



Malli sisältää seuraavan pallon toiminnon (metodin). 
• displayO - pallo näkyviin. 



OLION LUOMINEN 

Kuinka voidaan piirtää joukko palloja ruudulle? Selkein selitys on palloa esittävien muuttujien 
kopiointi. Lisäksi tarvitaan ohjeet pallojen näyttämistä ja hallintaa varten. Koodin koko on 
suhteessa ruudulla oleviin kohteisiin. Kaksi ongelmaa ilmenee: jos tahtoo muuttaa tai 
monimutkaistaa kohdetta, koodi täytyy kopioida yhtä monta kertaa kuin kohteita on. Pian 
koodia on mahdoton pitää järjestyksessä ja se vaatii uutta rakennetta. 

Välttääksemme tämän ongelman me muunnamme oliota pallo. Kun olento ohjelmassasi muuttuu 
liian monimutkaiseksi tai sen täytyy olla olemassa lukemattomina kopioina, sen täytyy olla olio. 

LUO OLIO 

Olion luominen tapahtuu kahdessa askeleessa: 

1. Oliomallin määrittely 

2. Yhden olion kopion (instanssin) luominen. 

MALLI 

Processing käyttää avainsanaa class määrittelemään olion. Sitä käytetään metodin 
määritelmänä: class (objektinNimi). Kaikki toiminnot ja ominaisuudet kirjoitetaan sen sisälle. 
Yleisesti ottaen kirjoitamme olion määritelmän koodimme lopussa. Varsinkin jos olio on 
monimutkainen, kannattaa luoda uusi välilehti, joka on erillään muusta koodista. 

class Pallo { 
} 
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INSTANSSI 



Kun malli on määritelty, meidän täytyy luoda yksittäinen kopio tästä mallista. Processing käyttää 
avainsanoja luodakseen uuden instanssin oliosta: new objektinNimi(). Tämä olio pitäisi varastoida 
muuttujaan, jotta sitä voidaan manipuloida myöhemmin. 
Listen 

Read phonetically 



Pallo myPallo = new PalloQ; 



Edellisessä esimerkissä julistamme muuttujan myPallo, joka on kopio oliosta Pallo. myPallo viittaa 
tähän olioon ja voi toimia myöhemmin ohjelmassa. Jotta tämä olio on käytettävissä koko 
ohjelmassa, laitamme sen julistuksen ohjelman alkuun. 



OMINAISUUDET 



Olioilla on ominaisuuksia, jotka määrittelevät ne ja tekevät niistä ainutlaatuisia. Nämä ovat 
muuttujia, jotka tehdään objektin alussa. 



class Pallo { 

//Pallon parametrien julistus 
float x; 
float y; 
color col; 



Editoidaksesi ominaisuutta objektin luomisen jälkeen täytyy edetä seuraavaksi: 
instanssinNimi.ominaisuudenNimi = arvo. Esimerkiksi: 

myPallo. x = 100; 



KONSTRUKTORI 



Konstruktori on metodi, jota kutsutaan oliota luotaessa. Sitä vastaa metodi setup (). Sillä on 
edelleenkin sama nimi kuin oliolla. Konstruktori ottaa joukon muuttujia ja laittaa ne olion 
parametriin: 



class Pallo { 

//Pallon parametrien julistus 
float x; 
float y; 
color col; 



Pallo (float newX, float newY, color newColor) { 
x = newX; 

y = newY; 

col = newColor; 

} 

} 



Kun luomme olion instanssin, annamme sille suoraan sen omat ominaisuudet parametreinä. 
Esimerkki alla luo valkoisen pallon, joka on sijainnissa 100, 100. 

myPallo = new Pallo(100, 100, color(255)); 

Varoitus! Meidän täytyy vain luoda kopio olion mallista. Sitä ei vielä näytetä ruudulla. 



TOIMINNOT 



Olion toiminnot edustavat eri asioita, joita olio voi tehdä. Nämä metodit julistetaan olion sisällä. 
Olion instanssin kutsu toimintaan on seuraava: instanssinNimi.metodinNimiQ; 
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Pallollamme on vain yksi toiminto: olla näkyvillä. Käytämme komentoja fill() ja ellipse() 
piirtääksemme sen. 



class Pallo{ 

//Pallon parametrien julistus 
float x; 
float y; 
color col; 

Pallo (float newX, float newY, color newColor) { 
x = newX; 

y = newY; 

col = newColor; 

} 

void display() { 
fill(col); 

ellipse(x, y, 40, 40); 

} 

} 

Katsoaksemme palloamme voimme kutsua metodia displayO sen kopiosta ohjelman metodissa 
draw(). 

void draw() { 

myPallo. displayO ; 

} 



LOPULLINEN OHJELMA 




//Pallon instanssin ja parametrien julistus 
Pallo myPallo = new Pallo(100, 100, color(255)); 

void setup() { 
smooth() ; 

size(400, 200); //Ikkunan koko 

} 

void draw() { 

background(0) ; //Mustan taustan julistus 
noStroke(); //Ei ääriviivoja 

myPallo . displayO ; //Pallo näkyviin 

} 

class Pallo { 

//Pallon parametrien julistus 
float x; 
float y; 
color col; 

//Pallon luominen 

Pallo (float newX, float newY, color newColor) { 
x = newX; 

y = newY; 

col = newColor; 

} 

//Pallon näyttäminen 
void displayO { 



fill(col); 

ellipse(x, y, 40, 40); 

} 

} 



MONTA PALLOA 



Luo toinen pallo julistamalla se esimerkiksi nimellä myPallo2 ja laita se näkyville. 




//Kahden pallo-instanssin julistus 

Pallo myPallol = new Pallo(100, 100, color(255)); 

Pallo myPallo2 = new Pallo(200, 100, color(128)); 

void setup() { 
smoothO ; 

size(400, 200); //Ikkunan koko 

} 

void draw() { 

background(0) ; //Mustan taustan julistus 
noStroke(); //Ei ääriviivoja 

myPallol . display () ; //Pallo 1 näkyviin 
myPallo2 . display() ; //Pallo 2 näkyviin 

} 

class Pallo { 

//Pallo-luokan parametrien julistus 
float x; 
float y; 
color col; 

//Pallon konstruktori 

Pallo (float newX, float newY, color newColor) { 
x = newX; 

y = newY; 

col = newColor; 

} 

//Pallo näkyviin 
void displayQ { 
fill(col); 

ellipse(x, y, 40, 40); 

} 

} 
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22 ■ METODIT 



Yksi menetelmä on blokki, joka sisältää ohjeet, joita tahdot käyttää uudestaan. Metodeita on 
hyvä käyttää, sillä voimme kirjoittaa toiminnon vain kerran ja käyttää sitä uudestaan 
lukemattomia kertoja. Käyttäessämme metodia koodissamme voimme kutsua sitä uudestaan eri 
kohdissa ohjelmaa. 

Tiedät jo monia metodeja, mutta vain käyttäjänä. Esimerkiksi rect(), ellipseQ, line() ja 
stroke() ovat kaikki metodeja. Luomalla omat metodimme voimme lisätä Processingiin 
ominaisuuksia, joita ohjelman kehittäjät eivät ole vielä tehneet. 

Tässä on puhtaan teoreettinen esimerkki lopputuloksesta. 

tausta(255) ; 
kaunisMaisemaQ ; 
puu(sypressi , 0,300); 
kuu(400, 100) ; 
ruoho (0, 300, width, 100) ; 
lammas(50, 133) ; 
lammas(213,98) ; 
lammas(155,88) ; 

Päämääränä on pakata ohjelmien monimutkaisuus avainsanoihin, joita voit kutsua niin usein kuin 
tahdot. Samalla voit käyttää Processingin omia metodeja. Tuloksena on yksinkertaisempi ja 
luettavampi koodi. Myös toistolta vältytään. Enemmän järjestystä ja vähemmän leikkaamista ja 
liimaamista. 



Kun luomme omat metodimme, meidän täytyy antaa jokaiselle niistä nimi. Kun metodi on 
nimetty, sitä voidaan käyttää ohjelmassa. Kutsu sitä vain sen nimellä. 

Processing yhdistää joukon menetelmiä, joilla voimme korjata omat versiomme. Tämä pätee 
metodeille draw(), setupQ, mousePressed()... Katso muista luvuista. Voimme myös luoda 
kustomoituja metodeja antamalla niille valitsemamme nimen. Tässä tapauksesa voit vain varoa 
käyttämästä nimeä, joka on jo otettu. 



mouton ( ) 




AVAINSANAT 



LEIKKAUS 
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Toistaiseksi olemme ohjelmoineet lineaarisesti Processingissa, olemme kirjoittaneet koodia 
ohjelman alusta alaspäin. Kun tahdomme luoda ohjelmamme metodit itse, joudumme 
leikkaamaan ohjelmamme kappaleiksi. Tämä antaa meidän osoittaa osat, jotka suoritetaan heti 
ohjelman alussa, ja ne osat, jotka kutsutaan myöhemmin. 

Huono puoli on se, että emme voi kirjoittaa komentoja suoraan Processingiin laittamatta niitä 
metodin tai luokan sisään. Metodien kanssa toimiminen on kaikki tai ei mitään. 

VOID SETUP () 

Processing tarjoaa paikan kirjoittaa koodia, joka suoritetaan ohjelmamme alussa. Tämä metodi 

on setup(): 

void setup() { 
} 

Kaikki ohjelman alussa suoritettava koodi pitää sijoittaa metodin setupO aaltosulkujen sisälle. Nyt 
ei kannata miettiä sanan void merkitystä, mutta sen täytyy olla ohjelman alussa. Tämän jälkeen 
sana setup, jota seuraa sulut, ja sitten aaltosulut. 

Suurimman osan aikaa käytämme menetelmää setupO määrittelemään kuvamme koon. Tämä 
koko voidaan asettaa vain kerran - mikä yhteensattuma, sillä käynnistyskin tapahtuu vain 
kerran ohjelmassa. 



void setup() { 
size(500,500) ; 

} 

LUO KUSTOMOITUJA METODEJA 

Alla olevissa esimerkeissä luomme metodin luoLammas(), joka sisältää ohjeet lampaan 
piirtämiseen. 




Todellisuudessa lammas on kätketty laatikkoon, joten näemme vain laatikon! Se piirtää myös 
reikiä, jotta lammas voisi hengittää. Kutsumme tätä metodia monta kertaa piirtääksemme 
enemmän lampaita. 

Tässä on koodi piirtämiselle: 

void setup() { 

size(600, 220); 
background(153,204,255) ; 
smooth() ; 

// Kutsutaan metodiamme lampaan piirtämiseksi 
luoLammasO ; 
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translate(120, 60); 
luoLammasQ ; 
translate(120, 60); 
luoLammasO ; 
translate(140, -60); 
luoLammasQ ; 



// Metodi lampaan piirtämiseksi. 

void luoLammaQ { 

strokeVVeight (3) ; 
strokeJoin(ROUND) ; 
stroke(0) ; 
fill(255); 

rect(20, 40, 80, 40); 
beginShape() ; 
vertex(20, 40); 
vertex(40, 20); 
vertex(120, 20); 
vertex(120, 40); 
endShape(CLOSE) ; 

beginShape() ; 
vertex(100, 40); 
vertex(120, 20); 
vertex(120, 60); 
vertex(100, 80); 
endShape(CLOSE) ; 

fill(0); 

ellipse(40, 60, 5, 5); 
ellipse(60, 60, 5, 5); 
ellipse(80, 60, 5, 5); 

} 

Ohjelman alku määritellään metodissa setup(). Koska käytämme metodia piirtääksemme 
lampaamme, loput ohjelmasta pitää sijoittaa johonkin tässä metodissa. Processingissa: 

void setup() { 

} 

Tämän jälkeen määrittelemme kuvamme koon ja sen taustavärin. 

size(600, 220); 
background(153,204,255) ; 

Olet ehkä esittänyt kysymyksen komennon smooth() roolista ohjelmassamme. Tämä komento 
on valinnainen, mutta se antaa meille miellyttävimmät viivat tietokoneen ruudulla. 

smoothQ ; 

Lopulta piirrämme lampaan käyttäen menetelmää, jonka olemme määritelleet myöhemmin. 

luoLammasQ ; 

Kun Processing kohtaa sanan luoLammasO se tietää sanojen olevan metodina jossain 
ohjelmassamme. Jos tämä metodi on olemassa, se kulkee tämän metodin läpi ja tekee kaiken 
sen sisällä olevan. 



Jos tätä metodia ei löydy - ja sitä ei ole Processingissa itsessään - ohjelmasi lopettaa 
virheviestiin. 

Huomaa: voit kirjoittaa avainsanan luoLammas () niin monta kertaa kuin tahdot. Tässä 
ohjelmassa luoLammasO on kirjoitettu 4 kertaa: 

luoLammasO ; 
translate(120, 60); 
luoLammasO ; 
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translate(120, 60); 
luoLammasO ; 
translate(140, -60); 
luoLammasO ; 

Huomaa, että asetimme jokaisen metodin luoLammas () väliin komennon translate (x, y). Tämä 
komento antaa meidän piirtää saman lampaan neljä kertaa eri paikkaan. Luku Muutokset selittää 
komennon translate() toiminnan. Komentoa translate () käytetään siirtämään piirrosten 
alkupiste. 

void luoLammasO { 
/* ... */ 

} 

Lopulta pääsemme metodiin luoLammasO itseensä. Tässä piirrämme tarvitut viivat ja muodot. 
Emme keskustele tästä, sillä käytetyt komennot selitetään muotoja käsittelevässä luvussa. 

Huomaa void-avainsana ennen metodimme nimeä. Tämä merkitsee, että se ei palauta mitään. 
Emme siis saa dataa ulos metodistamme. 

METODIN PALAUTUSARVO 

Metodilla voi olla palautusarvo. Toistaiseksi emme ole määritelleet palautusarvoa. Metodilla 
setupO tai draw() ei ole palautusarvoa. Sana void kertoo näissä tapauksissa, että mitään ei pitäisi 
palauttaa metodille, joka kutsui ne. 

Jos metodilta tahdotaan ulos joku tieto, se tulee palautusarvon muodossa. Jos tahdomme tietää 
paljonko kello on, käytämme metodia secondf), minutes() tai hour() saadaksemme niiden arvon 
muodossa integer (int). Jos nämä metodit eivät anna meille mitään (void) palautusarvona, ne 
eivät mahdollistaisi hyödyllisiä toimintoja. 

Metodien täytyy palauttaa arvo kutsulle, joka on esitetty ennen avainsanaa, joka määrittelee 
palautetun arvon tyypin. Metodi jonka tyyppi on int palauttaa arvotyypin int, metodi jonka tyyppi 
on float palauttaa tyypin float arvon, ja niin edelleen. 

Tässä on esimerkki metodista, joka antaa sekuntien määrän kellon 00:00:00 jälkeen. 

int sekuntejaEilisestaO { 

return hourQ * 3600 + minute() * 60 + secondQ; 

} 

void draw() { 

println( sekuntejaEilisestaO ); 

} 

Jos et tiedä metodia draw(), käytä silti tätä miniohjelmaa ja katso konsolia Processing-ikkunan 
alaosassa. Voit nähdä, että metodi draw() kutsuu jatkuvasti komentoa sekuntejaEilisesta () ja 
käyttää tämän metodin tuloksia näyttääkseen sekunteja. 

METODIN PARAMETRIT 

Metodi voi ottaa vastaan parametrejä. Yleensä niitä kutsutaan argumenteiksi. Jokaisella 
parametrillä täytyy olla tyyppi ja nimi, aivan kuin muuttujilla. 

Metodin kutsumiseksi voit kirjoittaa sen nimen, jonka perään tulee sulut. Sulkujen sisällä ovat 
metodin parametrit. 

kerroin(2, 2); 

Metodin sisällä Processing pääsee käyttämään niiden arvoja, kuten se tekee muuttujien kanssa. 



Esimerkiksi tässä metodi kutsutaan argumenteilla 2 ja 2, arvot ovat a = 2 ja b = 2. Metodin 
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palautusarvo on 4. 

int kerroini(int a, int b) { 
return a * b; 

} 

Huomaa, että argumenttien sijainti määrittää, mitkä arvot asetetaan mihinkin pisteeseen. 




print ( resultat) ; 

} 

Esimerkissä loimme metodin, joka palauttaa kahden argumentin kertolaskun tuloksen. Tämä 
kerrotaan metodia ennen olevassa kommentissa. Tällainen kommentointi on hyvä tapa. 

/* 

* Palauta kahden argumentin kertolaskun tulos. 

*/ 

int kerroin(int a, int b) { 
return a * b; 

} 

void setup() { 

int tulos = kerroin(2, 2); 
print(tulos) ; 

} 




MUUTTUJIEN LAAJUUS 



Katsotaanpa yleistä virhettä, joka voi tapahtua, kun käytät ohjelmassa muuttujia ja metodeja. 

Muuttujat - olkoot primitiivisiä tyyppejä tai objekteja - eivät välttämättä ole saatavilla koko 
ohjelmassasi. Se riippuu niiden julistuspaikasta. Metodin sisällä julistettu muuttuja on 
käytettävissä seuraavassa: 

void setup() { 
int x = 10; 

} 

void draw() { 

/* Tästä ohjelmasta tulee virheviesti, koska 
* muuttuja x on olemassa vain metodin setup() sisällä 

*/ 

x = x + 1; 

} 
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The fteld Component.x is not vislble 



Jotta muuttujat ovat saatavilla koko ohjelmassasi, sinun pitää julistaa se ohjelman alussa: 

int x; 

void setup() { 
x = 10; 

} 

void draw() { 
X = X + 1; 

} 
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23 - LISTAT 



Voimme laittaa monenlaisia asioita muuttujaan: numeron, murtoluvun, tekstin lauseen tai vaikka 
kokonaisen kuvan. Mutta vaikka muuttujat voivat teoriassa sisältää minkä tahansa tyypin arvon, 
ne voivat sisältää vain yhden näistä arvoista kerrallaan. Joissain tapauksissa olisi mukavaa 
ryhmittää joukko asioita yhteen, jolloin ne olisivat ainakin jonkinlaisessa yksittäisessä oliossa. 
Tästä syystä on keksitty erityinen muuttujatyyppi, listat. 

Listoja käytetään tallentamaan ennalta määrätty joukko tietoa tai olioita yhdessä muuttujassa. 
Sen sijaan että loisit 20 muuttujaa tallentamaan 20 erilaista arvoa, voit luoda yhden säilön näille 
20 arvolle ja käsitellä niitä yksi kerrallaan. 

LUO LISTA 

Jos käytämme peruselementtejä, kuten numeroita, on hyvin helppo tehdä lista: 

int[] numerot = {90,150,30}; 

Aaltosulut tarkoittavat, että sisällä ei ole vain yksittäinen kokonaisluku, vaan kokonainen lista 
kokonaislukuja, joiden sisällä on useampia arvoja. Niinpä voimme täyttää tämän listan 
aaltosulkeiden sisällä olevilla arvoilla. 

Tietokone luo tarpeeksi muistipaikkoja, jotta jokaiselle arvolle löytyy sopiva laatikko: 
int[] nunnbers = {90,150,30}; 

ii i 

90 150 30 
0 1 2 

Tästä syystä käytämme sanaa int, koska Processingin täytyy tietää jokaisen listan laatikon arvo. 
Jos ne olisivat kuvia, jokainen listan solu tarvitsisi paljon enemmän tilaa. 

LUO TYHJÄ LISTA 

Tämä suoran luomisen menetelmä ei toimi epätavallisempien elementtien, kuten äänien tai 
kuvien kanssa. 

Yleensä lista julistetaan seuraavasti: tyyppi [] LISTA NIMI= new LISTAN TYYPPI [KOHTEIDEN 
MÄÄRÄ LISTASSA ]. Esimerkki alla luo kolmen kokonaisluvun listan. Ole tarkkana, kun luomme 
listan. Tämä on sarja tyhjiä laatikoita: ne eivät sisällä arvoa. 

int[] numerot = new int[3]; 

int [ ] numbers = new int [3 ] ; 




0 1 2 
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KOKONAINEN LISTA 



Arvojen sijoittaminen listaan toimii samalla tavalla kuin arvon laittaminen muuttujaan. Täytyy olla 
myös tarkennus, mihin sijaintiin listalla arvo lisätään. 

numerot[0] = 90; 
numerot[l] = 150; 
numerot[2] = 30; 

Nämä arvot numeroidaan automaattisesti arvosta 0 arvoon listan pituus miinus yksi. 

LISTAN SISÄLLÖN KÄYTTÖ 

Listan elementin käyttö on samanlaista kuin muuttujan käyttö. Määrittelet vain kyseisen 
elementin sijainnin listalla: 

println( numerot[0] ); 

Huomaa, että tietokone aloittaa sijainnista 0, ei 1. Jos kutsumme arvoa numerot[2], Processing 
antaa meille kolmannen sijainnin arvon eikä toisen sijainnin arvoa. Processingin muisti toimii 
seuraavaksi: nollas ensin, sitten ensimmäinen, toinen jne. Nollas arvo on listan alussa. 

Tässä esimerkissä käytämme silmukkaa laskeaksemme kaikkien aiemmin julistettujen 
elementtien summan: 

int[] numerot = new int[3]; 

numerot[0] = 90; 
numerot[l] = 150; 
numerot[2] = 30; 

int summa = 0; 

for (int i = 0; i < 3; i++) { 
summa = summa + numerot[i]; 

} 

println(summa) ; 

Tämän ohjelman pitäisi näyttää seuraava ulostulo konsolissasi, Processing-ikkunan alaosassa: 
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int[] numbers = new int[3]; 

numbers[8] = 99; 
numbers[l] = 158; 
numbers[2] = 39; 

int somme = 8; 

for (int i = 8; i < 3; i++) { 
somme = somme + numbers[i]; 

} 

■ pri nti n( somme); 




Ensin loimme muuttujan, joka sisältää kaikkien arvojen summan. Se alkaa arvosta nolla. 

Tämän jälkeen lisäämme silmukan, joka toistaa itsensä kolme kertaa, ja lisäämme joka kerralla 
seuraavan arvon summaan. Tässä näemme läheisen suhteen, joka on olemassa listan ja for () - 
silmukan välillä. Arvo i voi kulkea listan arvojen läpi yksitellen, aloittaen arvosta nolla, siirtyen 
arvoon 1 ja sen jälkeen arvoon 2. 

KUVAT SEURAAVAT TOISIAAN 

Yksi tapa käyttää listoja on kuvien tuominen Processingiin. Oletetaanpa, että tahdomme tuoda 
viisi kuvaa Processingiin. Kun emme käytä listoja, voimme kirjoittaa jotain tällaista: 

PImage kuval; 

kuval = loadImage("kuva_l . png") ; 
image(kuval , 0, 0) ; 

PImage kuva2; 

kuva2 = loadImage("kuva_2 . png") ; 
image(kuva2,50,0) ; 

PImage kuva3; 

kuva3 = loadImage("kuva_3 . png") ; 
image (kuva 3 , 100 , 0) ; 

PImage kuva4; 

kuva4 = loadImage("kuva_4. png") ; 
image(kuva4, 150,0) ; 

PImage kuva5; 

kuva5 = loadImage("kuva_5 . png") ; 
image (kuva5 , 200 , 0) ; 

Äärimmillään tämä esimerkki on hallittavissa, mutta kirjoitusvirheitä tulee helposti. Jopa 
kirjoittaessani näitä rivejä tähän kirjaan tein paljon kirjoitusvirheitä tai unohdin muuttaa 
edelliseltä riviltä kopioimani tekstin. 
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Parempi tapa kirjoittaa tämä esimerkki on listojen käyttö: 

PImage[] kuvat = new PImage[5]; 

kuvat[0] = loadlmage("kuva_0. png") ; 

kuvat[l] = loadImage("kuva_l . png") ; 

kuvat[2] = loadImage("kuva_2 . png") ; 

kuvat[3] = loadImage("kuva_3 . png") ; 

kuvat[4] = loadImage("kuva_4. png") ; 

image( kuvat[0], 0, 0); 
image( kuvat[l], 50, 0); 
image( kuvat[2], 100, 0); 
image( kuvat[3], 150, 0); 
image( kuvat[4], 200, 0); 

Listaa käyttäen voimme laittaa kaikki kuvamme yhteen muuttujaan, joka initialisoidaan vain 
kerran: PiMag [] = new PiMag [5]. Tämän jälkeen voimme täyttää jokaisen tiedoston jokaisen 
arvon sijaintien listaan. 

Mutta näinkin kirjoittamiseen menee liikaa aikaa. Mitä teet, jos sinulla on 200 tai jopa 2000 
kuvaa? Kirjoitatko todella kaiken 200 kertaa? Ja mitä teet, kun tahdot tuoda uudelleennimetyn 
tiedoston? 

Tässä on paras tapa tuoda kuvasarja: 

size(500, 500) ; 

PImage[] kuvat = new PImage[20]; 

for(int i=0; i<images . sizeQ ; i++) { 
kuvat[i] = loadImage("kuva_" + i + ".png"); 

image( kuvat[i], random(width) , random(height) ); 

} 

Käyttäen silmukkaa for() voimme nyt tuoda niin monta kuvaa kuin tahdomme. 

Ensin luomme kuvalistan. Se on aluksi tyhjä lista: 

PImage[] kuvat = new PImage[20]; 

Tämän jälkeen saamme listan pituuden kysymällä siltä montako kuvaa se sisältää komennolla 
images.size(). Tämän jälkeen voimme käyttää tätä komentoa antamaan for() -silmukan toistojen 
määrän. 

for(int i=0; i<images . sizeQ ; i++) 

Voimme jopa automatisoida kuvien tuomisen käyttäen arvoa i kutsuaksemme kuvien 
tiedostonimiä. Merkillä "+" voimme yhdistää kaksi sanaa, mikä merkitsee, että kaksi sanaa tai 
merkkiä voidaan yhdistää yhteen viestiin. 

kuvat[i] = loadImage("kuva_" + i + ".png"); 

Liittämällä sanat "kuva_", muuttujan i arvon ja tiedostopäätteen ".png", saamme viestin, joka 
sisältää tekstin "kuva_42-png". Näin voimme käyttää yhtä riviä koodia luomaan niin monta kuvaa 
kuin tahdomme. Jos muuttuja i sisältää arvon 9, tuodun tiedoston nimi on kuva_9.png. Jos 
muuttuja i sisältää arvon 101, tuodun tiedoston arvo on kuva_101.png. 

Jotta tämä tekniikka toimisi, sinun täytyy vain laittaa tiedostot valmiiksi data-hakemistoosi. 
Tässä on datahakemisto, joka sisältää 20 kuvatiedostoa: 
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Kun jokainen näistä kuvista tulee ohjelmaamme, piirrämme sen johonkin luonnoksessamme. 

image ( kuvat[i], random(width) , random(height) ); 

Tämä lause piirtää kuvan (0,1,2,3,...) satunnaiseen paikkaan x ja y -akseleilla. Se käyttää 
leveyden ja korkeuden nykyistä arvoa sijaintina. Nämä kaksi arvoa vastaavat kuvan kokoa 
piirroksessa, mikä merkitsee, että jokainen kuva piirretään satunnaiseen paikkaan 
piirroksessamme. 

PIKSELISARJA 

Jos luit kuvia käsittelevän luvun, näit että PiMag-muuttuja ei sisällä yhtä muuttujaa vaan monia, 
ellei kuvasi ole yhden pikselin korkuinen ja levyinen. Tästä harvinaisesta poikkeamasta 
huolimatta kuvasi sisältää sarjan muutoksia, jotka edustavat kaikkia kuvan muodostavia 
pikseleitä. Tätä sarjaa kutsutaan listaksi. 

Voit päästä suoraan pikseleihin pyytämällä suoraa pääsyä alimuuttujaan nimeltä "pixels". 
Kuvitelkaapa, että meidän täytyy aloittaa mystisen naisen kuva tiedostossa Ihooq.png. 
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Jos tuomme tämän kuvan Processingiin, voimme ottaa tietyn pikselin kuvan menemällä 
kuvalistan sisään. Tätä listaa kutsutaan funktiolla pixels []. 




size(512,256) ; 
PImage lhooq; 

lhooq = loadImage(" lhooq . png") ; 
image(lhooq,0,0) ; 

int x = 119; 
int y = 119; 

int index = x + (y * lhooq . width) ; 
color c = lhooq . pixels[index] ; 

noStroke() ; 
fill(c); 

rect(256, 0,256, 256) ; 

stroke(0) ; 
line(x-5 , y , x+5 , y) ; 
line(x,y-5,x,y+5) ; 

Kaksi tärkeintä riviä on lihavoitu: 

int index = x + (y * lhooq . width) ; 
color c = lhooq . pixels[index] ; 

Huomautamme, että kuva ei ole mitään muuta kuin lista pikseleitä. Tyypin PiMag muuttujat 
tallentavat pikselien arvot pitkään listaan. 
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Näemme listan kahdella (x, y) ulottuvuudella, PiMag nähdään yhdestä suunnasta. Jos löydämme 
arvon sijainnissa (2,1), todellisuudessa sen pitäisi osoittaa, että tahdomme laittaa sen sijaintiin 17 
kuvassa. Todellisuudessa rivin pisteen ja vastaavan seuraavan rivin pisteen välillä on 16 pikseliä. 
Toisin sanottuna meillä on 16 pikseliä jokaista riviä kohden. 

Tästä syystä pikselin kaava kirjoitetaan (x + (leveys * y)). Jokaista y-riviä kohden on paljon x- 
arvoja, joiden arvot täytyy saada. 

KUVAN PIKSELIEN VÄRITTÄMINEN 

Voit jopa luoda omat PiMag-muuttujasi ja antaa sille pikselien värit. Kuvapikseleitä käytetään 
nollasta alkaen, kuten mitä tahansa listaa. 




Tässä esimerkissä piirrämme kolme kertaa kolmen pikselin ruudukon. Piirrämme suuremman 
kuvan venyttämällä sen 80 x 80 pikseliin. 

PImage img = createlmage(3 , 3, ARGB) ; 
img. loadPixelsO ; 
img. pixels[0] = color(255, 0, 0); 
img. pixels[l] = color(0, 255, 0); 
img.pixels[2] = color(0, 0, 255); 
img.pixels[3] = color(255, 0, 255); 
img.pixels[4] = color(255, 255, 0); 
img.pixels[5] = color(0, 255, 255); 
img. pixels[6] = color(0, 0, 0); 
img.pixels[7] = color(127, 127, 127, 255); 
img. pixels[8] = color(255, 255, 255, 0); 
img. updatePixels() ; 
image(img, 10, 10, 80, 80); 

Huomaa, että muunnamme Processingissa kuvaan komennolla loadPixels () ja lopetamme kuvan 
muokkaamisen komennolla updatePixels (). Muuten emme näe listaan tekemiemme muutosten 
seurauksia. 

Huomaa, että voit myös tehdä tällaisen maalauksen käyttäen toistoja. 
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24 ■ TOISTAMINEN 



Toistaminen voi ajaa joukon komentoja loputtomasti. Näin ei ole tarpeen kirjoittaa koodinpätkiä 
uudestaan. 

Varoitus! Toistot eivät luo animaatioita oikeaan aikaan. Ne tehdään niin nopeasti kuin 
mahdollista. Kun tietokone lukee koodia ja löytää silmukan, se ajaa hakasulkujen sisällä olevan 
koodin niin monta kertaa kuin silmukka käsketään toistamaan. 

Seuraavassa esimerkissä näemme kuusi horisontaalista mustaa viivaa. Ensimmäinen koodi 
sisältää kymmenen kertaa komennon line(), toinen koodi tehdään silmukkana. Molempien 
koodien tulos on sama. 

line(0, 0, 100, 0); 

line(0, 10, 100, 10); 

line(0, 20, 100, 20); 

line(0, 30, 100, 30); 

line(0, 40, 100, 40); 

line(0, 50, 100, 50); 

line(0, 60, 100, 60); 

line(0, 70, 100, 70); 

line(0, 80, 100, 80); 

line(0, 90, 100, 90); 

...tai yksinkertaisemmin: 

for (int i = 0; i < 100; i = i + 10) { 
line(0, i, 100, i); 

} 

FOR-SILMUKKA 

Tällainen silmukka toistaa joukon komentoja monta kertaa. Siihen kuuluu muuttuja, jonka arvoon 
lisätään yksi jokaisen silmukan toiston jälkeen. Silmukan sisäisen muuttujan nimenä käytetään 
usein kirjainta i. For-silmukan muuttuja tarvitsee alkunumeron, maksiminumeron ja lisäyksen. 
Esimerkiksi: for (int i = AlkuNumero i < MaksimiNumero i = i + LISÄYS) {}. 

Alla oleva esimerkki näyttää valkoisia neliöitä vierekkäin. Jokainen on 10 pikseliä leveä. Niiden väli 
on 5 pikseliä. Laitamme ensimmäisen neliön kohtaan 0.0. Seuraava esitetään koordinaateissa 
15.0, sitä seuraava koordinaatissa 30.0 ja niin edelleen. Silmukkamme lisää muuttujaan 15 pikseliä 
joka askeleella. Koska tahdomme täyttää koko piirrostilan, maksimiarvo on kuvan leveys 
(vvidth). 



for (int i = 0; i < vvidth; i = i + 15) { 
rect(i, 0, 10, 10); 

} 



MITTARIT 



Tähän asti olemme käyttäneet silmukoita niin, että silmukan sisäinen muuttuja on suoraan 
käytettävissä. Edellisessä esimerkissä se antaa meille heti jokaisen x-akselin arvon, johon neliö 
piirretään. 
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Silmukoita voidaan myös käyttää laskureina. Niille annettiin minimi- ja maksimimuuttuja, johon 
lisätään vain 1 jokaisella silmukan suorituskerralla: tämä laskee käskyjen suorituskerrat, joten 
käytetään käsitettä laskuri. 

Tämä menetelmä vaatii enemmän matematiikkaa silmukan sisällä olevan muuttujan käyttöön. 




for (int i = 0; i < 5; i = i + 1) { 
rect(i, 0, 10, 10); 

} 

Edellisessä esimerkissä näemme neliöiden olevan päällekkäin. Koska muuttujalla i on arvot 0-5 ja 
koska me käytämme muuttujaa i sijoittamaan ne avaruuteen, ne sijoitetaan kohtiin 0.0, 1.0, 2.0, 
3.0 ja 4.0. Vain viimeinen näistä on kokonaan näkyvillä. Saadaksemme saman tuloksen kuin 
edellisessä esimerkissä voimme kertoa muuttujan. Tässä tapauksessa kerrotaan muuttuja 
arvolla 15, jolloin neliöiden väliin jää 5 pikseliä. Ne ovat tasaisesti 15 pikselin välein. Voimme sittne 
käyttää laskurin arvoa muihin operaatioihin. 




for (int i = 0; i < 5; i = i + 1) { 
rect(i * 15, 0, 10, 10); 

} 

SISÄKKÄISET SILMUKAT 

Silmukat voidaan laittaa toistensa sisään. Tämä tekniikka antaa meidän siirtyä nopeasti kahteen 
visualisaatioon ja näkemään kolme ulottuvuutta. Kun silmukat ovat toistensa sisällä, meidän 
täytyy pitää huolta nimestä, joka annetaan jokaisen silmukan muuttujalle. Jos jokaisen muuttujan 
nimi on i, ohjelma yhdistää silmukat. Jokaisen silmukan jokaisella muuttujalla pitää olla kunnon 
nimi. Esimerkiksi: i, j, k, jne. Tai jos ne liittyvät ulottuvuuksiin: x, y ja z. 

Silmukan alku 




translate(7, 7); 

for (int x=0;x<6;x=x+l){ 
rect(x * 15, 0, 10, 10); 

} 

Kaksi silmukkaa 
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translate(7, 7); 

// Ensimmäinen silmukka 

for (int y=0;y<6;y=y+l){ 

// Toinen silmukka 

for (int x = 0;x<6;x = x + l){ 
rect(x * 15, y * 15, 10, 10); 

} 



Kolme silmukkaa 



Tässä esimerkissä tutustumme kolmiulotteiseen avaruuteen. Laittaaksemme 
syvyysulottuvuuden neliöihimme, voimme käyttää metodia translate (). 
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size(100, 100, P3D); 

translate(7, 7); 

//Ensimmäinen silmukka 

for (int z=0;z<6;z=z+l){ 

translate(0, 0, z * -15); //Kohde akselilla z 

//Toinen silmukka 

for (int y=0;y<6;y=y+l){ 
//Kolmas silmukka 

for (int x=0;x<6;x=x+l){ 
rect(x * 15, y * 15, 10, 10) ; 

} 

} 

} 



Muunnelmat 



Tässä on joukko muunnelmia, joissa käytetään metodeja fill (), scale () ja rotate (). Tässä 
voit nähdä muutokset silmukoiden sisällä. 
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25 ■ EHDOT 



Ehtojen avulla tietokone voi tehdä päätöksiä. Se voi muuttaa ohjelmaa riippuen asettamistasi 
ehdoista. Jos tahdot esimerkiksi muuttaa ohjelmasi ulkoasua ajan kuluessa, voit laittaa mustan 
taustan ehdoksi kellonajan 10-18 ja valkoisen taustan ehdoksi muut kellonajat. Tämä kysely 
"paljonko kello on" on ehto. 



VERTAILU 



Perusehto on vertailu. Ennen kuin voit käyttää vertailua, meidän täytyy tehdä Processingissa 
kysymys. Tämä kysymys on melkein aina vertailu. 




Jos kyselyn tulos on "tosi", Processing ajaa komennon. Jos kyselyn tulos on "epätosi", se suorittaa 
toisen komennon. Englanniksi tosi on "true" ja epätosi on "false". 

Ehdon syntaksi on if(TESTI) {}. TESTI on operaatio, joka vertailee kahta arvoa, ja päättelee onko 
tulos tosi vai epätosi. Jos tulos on tosi, Processing tekee aaltosulkujen välillä olevat komennot. 
Komento else voi käsitellä myös tilanteen, jossa ehto ei ole tosi eikä epätosi. Sen toiminnot ovat 
myös sulkujen sisällä. Voit laittaa näiden sulkujen sisälle niin monta komentoa kuin tahdot. 

SAMANARVOISUUS 



Käytämme kaavaa if (arvo1==arvo2) tarkastamaan kahden muuttujan samanarvoisuuden. 
Seuraava esimerkki merkitsee "Sano että on keskipäivä, jos metodi hour() antaa arvon 12." 

if (hour() == 12) { 

println("0n keskipäivä!"); 
} else { 

println("Ei ole keskipäivä!"); 

} 

Tulos on muulloin kuin kello 12:00 ja 12:59 välillä: 



Ei ole keskipäivä. 1 
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PIENEMPI KUIN JA SUUREMPI KUIN 



Voimme tarkastaa että arvo on pienempi tai suurempi kuin toinen arvo käyttäen operaattoreita 
< ja >. Seuraavassa esimerkissä kirjoitamme ulostuloon onko aamu vai eikö. 

if (hour() < 12) { 

println("On aamu ! ") ; 
} else { 

println("Ei ole aamu!"); 

} 

Ohjelman tulos kello 12:59 jälkeen: 



Ei ole aamu ! 



PÄÄTÖKSEN YHDISTELMÄ 



Komennot if ja else voidaan yhdistää useampien tapausten käsittelemiseksi. 

if (hour() < 12) { 

println("On aamu ! ") ; 
} else if (hour() == 12) { 

println("On keskipäivä!"); 
} else { 

println("Ei ole aamu!"); 

} 

Tämän ohjelman tulos kello 12:59 jälkeen on: 



TESTIEN YHDISTÄMINEN 



Monta testiä voidaan yhdistää samaan päätökseen, jotta valinnasta tulee tarkempi. Operaattorit 
&& (ja) sekä || (tai) voivat yhdistää testejä. Jos esimerkiksi tahdomme tietää onko yö vai päivä, 
voimme erottaa myöhäisen yön ja aikaisen aamun tunnit loppupäivästä: 

if (hour() < 6 && hour() > 20) { 

println("On yö ! ") ; 
} else { 

println("Ei ole yö!"); 

} 

Ohjelman tulos kello 16:50 on: 



Ei ale yä L 
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26 - MUUTTUJAT 



Muuttuja on tietty arvo, jonka tietokone tallentaa muistiinsa. Se on kuin pakkaus, jonka koko 
sopii tietynlaiselle tiedolle. Sitä luonnehtii nimi, jonka avulla voimme helposti käyttää sitä. 



42 491 33.145 



« Salut tout le monde ! » true 



angle 



message 



vie 



On erilaisia muuttujatyyppejä: kokonaisnumeroita (int), desimaalinumeroita (float), tekstiä (String) 
ja tosi/epätosi -arvoja (boolean). Desimaali, kuten 3.14159 ei ole tyyppiä int vaan tyyppiä float. 
Huomaa, että käytämme desimaalinumeroille pistettä emmekä pilkkua. Niinpä kirjoitamme 
3.14159. Muuttujat voidaan luoda näin: 

float x = 3.14159; 
int y = 3; 

Muuttujan nimi voi sisältää kirjaimia, numeroita ja muita merkkejä, kuten alaviivan. Kun ohjelma 
kohtaa tämän muuttujan nimen, se voi lukea tai kirjoittaa tähän tilaan. Seuraavana on lista 
muuttujista yksinkertaisten esimerkkien kanssa. Muuttujalla on tyyppi, nimi ja arvo, joka voidaan 
lukea ja jota voidaan muuttaa. 



INT 



Processingin syntaksissa voit tallentaa kokonaisluvun, kuten 3, int -tyyppiseen muuttujaan. 

int kokonaisluku; 
kokonaisluku = 3; 
print (kokonaisluku) ; 

FLOAT 



Muuttuja float on desimaalinumero, kuten 2.3456. 

float desimaali; 
desimaali = PI; 
print (desimaali) ; 



3.1415927 



DOUBLE 



Muuttuja double on myös desimaalinumero, mutta tarkempi kuin float. 

double pitka_desimaali ; 
pitka_desimaali = PI; 
print(pitka_desimaali) ; 



3.141592741B125732 



BOOLEAN 



Muuttujalla boolean on vain kaksi tilaa. Nämä tilat ovat tosi (true) ja epätosi (false). Sitä 
käytetään ehdoissa tutkimaan onko ilmaisu tosi vai väärä. 

boolean onkotosi;! 
onkotosi = true; 
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println(onkotosi) ; 



true 



CHAR 



Muuttujaan char voidaan tallentaa kirjoitusmerkki. Huomaa heittomerkkien käyttö 
lainausmerkkien sijasta. 



char kirjain; 
kirjain = 'A' ; 
print(kirjain) ; 




STRING 



Käytetään tekstin tallentamiseen. Huomaa lainausmerkkien käyttö. 

String teksti; 
teksti = "Moi ! " ; 
print (teksti) ; 




COLOR 



Tallentaa värin. On usein hyödyllinen, kun tahdot käyttää samoja värejä. 




noStroke() ; 

color valkoinen = color(255, 255, 255); 
color musta = color(0, 0, 0); 

fill(valkoinen) ; rect(0, 0, 25, 25); 
fill(musta); rect(25, 0, 25, 25); 
f ill(valkoinen) ; rect(50, 0, 25, 25); 
fill(musta) ; rect(75, 0, 25, 25); 

fill(musta) ; rect(0, 25, 25, 25); 
fill(valkoinen) ; rect(25, 25, 25, 25); 
fill(musta); rect(50, 25, 25, 25); 
fill(valkoinen) ; rect(75, 25, 25, 25); 

fill(valkoinen) ; rect(0, 50, 25, 25); 
fill(musta); rect(25, 50, 50, 25); 
fill(valkoinen) ; rect(50, 50, 75, 25); 
fill(musta); rect(75, 50, 100, 25); 

fill(musta); rect(0, 75, 25, 25); 
fill(valkoinen) ; rect(25, 75, 25, 25); 
fill(musta); rect(50, 75, 25, 25); 
fill(valkoinen) ; rect(75, 75, 25, 25); 



Ohjelmointi 
27. Muutokset 
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28. Viivatyylit 

29. Kuvat 



27 - MUUTOKSET 



Toistaiseksi olemme suunnitelleet muotoja sovelluksemme ikkunassa, aina suhteessa ikkunan 
vasempaan yläkulmaan. 

Muutoksilla on mahdollista siirtää tätä alkupistettä, mutta myös määritellä uudelleen akseleiden 
suunta ja jopa muuttaa näiden viivojen skaalaa. 




size(200, 200); 
noStroke() ; 
fill(0); 

rect(0, 0, 100, 100); 



SIIRTO 



Alkupisteen muuttamiseksi on komento translate (). Voimme siirtää x-akselia (horisontaalisesti) 
ja y-akselia (vertikaalisesti). Kerromme translate () -komennolle, kuinka paljon tahdomme 
siirtää näitä akseleita. Seuraavassa esimerkissä siirrämme alkupistettä 50 pikseliä suunnassa x 
ja 50 pikseliä suunnassa y. Tulisi huomata, että translate () ei vaikuta myöhemmin piirrettyihin 
geometrisiin muotoihin. 






50 


\ 


X 


50 


0 




y ] 











size(200, 200); 
noStroke() ; 
fill(0); 

translate(50, 50); 
rect(0, 0, 100, 100); 



Komennon translateQ linkittäminen antaa sinun siirtää muotoja, kuten alla näkyy. 
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size(200,200) ; 



// Musta 
fill(0); 

translate(20,20) ; 
rect(0,0,40,40) ; 

// Harmaa 
fill(128) ; 
translate(60,60) ; 
rect(0,0,40,40) ; 

// Valkoinen 
fill(255); 
translate(60,60) ; 
rect(0,0,40,40) ; 

KÄÄNNÖS 



Voimme siirtää koordinaattipiirroksen alkupistettä. Nyt pyöritämme akseleita. Komennolla 
rotateO x ja y vaihtavat suuntaa. rotate() ottaa parametriksi numeron, joka esittää 
pyörimisliikkeen astetta, eli kuinka akselimme pyörivät suhteessa ikkunaamme. Positiiviset 
numerot osoittavat pyörimistä myötäpäivään. 



PI+HALF PI 




HALFPI 

Unites de mesure 



Olemassa on kaksi mittausjärjestelmää kulman mittaamiseen: radiaani ja asteet. Oletusarvoisesti 
Processing toimii radiaanilla, mutta yleensä on helpompi ajatella asteina. Esimerkiksi 180 astetta 
on u-käännös. 

Processing muuttaa yhden yksikön toiseksi funktioilla radiansO ja degrees(). 

f loat d = degrees(PI/4) ; // muuttaa radiaanin asteiksi 
float r = radians(180 . 0) ; // muuttaa asteet radiaaniksi 

Yksinkertainen esimerkki funktion rotateQ toiminnasta. Pyöritämme neliötä alkupisteen ympäri. 




size(200, 200); 
noStroke() ; 
fill(0); 
rotate(PI/4) ; 
rect(0, 0, 100, 100); 

Kuten translate(), rotate() asetetaan ennen geometristen muotojen piirtämistä. On mahdollista 
yhdistää näitä muutoksia, jotka ovat kasautuvia. 




size(200,200) ; 
smoothQ ; 

translate(width/2 , height/2); 
for (int i=0; i<360; i+=30){ 

rotate(radians(30)) ; 

quad(0, 0, 30, 15, 70, 60, 20, 60); 

} 

SKAALAAMINEN 

Kohteiden kokoa voidaan muuttaa komennolla scaleQ. Tämä komento antaa sinun suurentaa tai 
kutistaa geometristen muotojen kokoa. Se ottaa yksi tai kaksi parametriä. Esimerkiksi 
scale(0.5) puolittaa geometristen muotojen koon, kun taas scale(2.0) kaksinkertaistaa sen. 
Komennolla scale(i) ei ole mitään vaikutusta. 

Kahdella parametrillä kirjoittaminen yhdistää koon muuttamisen akseleilla x ja y. Esimerkiksi 
scale(0.5, 2.0) puolittaa koon suunnassa x ja kaksinkertaistaa sen suunnassa y. 
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200 



size(200,200) ; 
scale(1.5) ; 
rect(0,0, 100, ie 



0 X 1 



150 200 





200 



size(200,200) ; 
scale(1.0,1.5) ; 
rect(0,0, 100, 100) ; 

Kuten komennot rotate() ja translate(), komennon scale() toistaminen kasautuu. Seuraava 
ohjelma esittää tämän ominaisuuden. Tässä neliöt ovat sisäkkäin kuin venäläiset nuket ja niiden 
koko kasvaa toistettaessa komentoa scaleQ. 




size(200,200) ; 
noStroke() ; 

// Musta 
fill(0); 
scale(l) ; 

rect(0, 0,200, 200) ; 

// Harmaa 
fill(128); 
scale(0. 5) ; 
rect(0, 0,200, 200) ; 

// Valkoinen 
fill(255); 
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scale(0. 5) ; 
rect(0, 0,200, 200) ; 

MUUTOSTEN JÄRJESTYS 

On mahdollista yhdistää muutama erilainen muutostyyppi. Kuten näimme edellisessä 
esimerkissä, muutokset kasautuvat asteittain, kun peräkkäiset translateO, rotateO ja scaleQ - 
komennot kasautuvat. Jokainen muutos ottaa huomioon edelliset muutokset. 

Kun käytetään useampia erilaisia muutostyyppejä, niiden kirjoitusjärjestys on tärkeä. Ajaessasi 
autolla "käänny vasempaan ja aja suoraan" on eri komento kuin "aja suoraan ja käänny 
vasemmalle". Et välttämättä päädy samaan paikkaan. Sama pätee Processingin muutoksiin. 

Esittelemme tämän komennon kääntämällä komennot translateO ja rotateO toisin päin. 



0 * 0 




translate( 100,0) ; rotate(PI/5) ; 



size(200,200) ; 
smoothQ ; 
fill(0); 

translate(100,0) ; 
rotate(PI/5) ; 
rect(0,0, 100, 100) ; 




rotate{PI/5); translatef 100,0) ; 



size(200,200) ; 
smooth() ; 
fill(0); 

rotate(PI/5) ; 
translate(100,0) ; 
rect(0,0, 100, 100) ; 

ERISTÄ MUUTOKSET 



Olemme nähneet muutoksien kasautuvan asteittain käytettäessä komentoja translateO, 
rotateO ja scale(). Näemme nyt, kuinka muutokset voidaan tallentaa tiettynä aikana, ja kuinka 
palauttaa ne myöhemmin, komennon draw() aikana. 



Käytämme sitä kahteen funktioon, joita käytetään aina pareittain. Nämä komennot ovat 
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pushMatrixQ ja popMatrix(). Näemme lopuksi, miksi nämä komennot on nimetty niin oudosti. 



Kahdessa seuraavassa esimerkissä näemme seuraavat muutokset: 

* A: Aluksi ikkunan vasen ylänurkka. 

* B: Alkupiste ruudun keskellä. 

* C: Alkupiste ruudun keskellä, kieritetään PI/4. 




size(200,200) ; 
smooth() ; 
rectMode (CENTER) ; 

// Tee kirjanmerkki ruudun keskipisteeseen 
translate(width/2,height/2) ; 

// Tallennus A 
pushMatrix() ; 

// Muutos B 
rotate(PI/4) ; 

// Piirrä musta neliö 
fill(0); 

rect(0, 0,120, 120); 
// Palautus A 

// Tässä pisteessä kirjanmerkki palaa ruudun keskipisteeseen 
popMatrix() ; 

// Piirrä valkoinen ruutu, joka ei ota pyöritystä huomioon 

fill(255); 

rect(0,0,50,50) ; 



Voimme käyttää funktioita pushMatrix() ja popMatrix() tallentamaan nykyisen muutoksen tilan. 

Edellisen esimerkin pohjalta laitamme pushMatrix() / popMatrix() -parin, joka tallentaa 
ensisijaisen muutoksen (width / 2, height / 2). 




size(200,200) ; 
smooth() ; 
rectMode (CENTER) ; 
noStrokeQ ; 
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// Varmuuskopio A 
pushMatrix() ; 

// Muutos B 

translate(width/2 , height/2) ; 

// Tallennus B 
pushMatrix() ; 

// Muutos C 
rotate(PI/4) ; 

// Piirretään musta neliö 
fill(0); 

rect(0,0,120,120) ; 

// Palautus B 
popMatrix() ; 

// Piirrä valkoinen neliö, joka ei ota huomioon 
// pyöritystä rotate(PI/4) 
fill(255); 
rect(0,0,50,50) ; 

// Palautus A 
popMatrix() ; 

// Piiretään harmaa laatikko 
fill(128) ; 
rect(0,0,100,100) ; 



KOLMIULOTTEINEN MUUTOS 



Kaikki muutokset, joista olemme keskustelleet, ovat mahdollisia myös kolmiulotteisessa 
piirtämisessä. Processing siirtyy kolmiulotteiseksi, kun kutsumme komentoa size(): 

size(300,300,P3D) ; 

Tässä tilassa Processing määrittelee z-akselin osoittavan ruudun pohjaa kohden. 




V 



Matkan ja skaalan muutokset kirjoitetaan lisäämällä kolmas parametri. Esimerkiksi siirtyminen 
ruudun keskipisteeseen x ja y -akselia pitkin mahdollistaa piirtämisen kuin muodot olisivat 
kaukana meistä, voisimme kirjoittaa jotain tällaista: 

translate(width/2, height/2, -100); 

Pyörityksiä varten tarvitsemme kolme uutta komentoa: rotatex, rotateY ja rotatez. Nämä 
kierittävät akseleita x, y ja z. 
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Processing sisältää funktiot yksinkertaisten kolmiulotteisten muotojen piirtämistä varten. Näihin 
sisältyvät kuutiot ja pallot. Luomme kuution, joka kiertää akselien x ja y ympäri, ja joka 
asetetaan hiiren sijaintiin. 




float rx = 0; 
float ry = 0; 
float z = 100; 

void setup() { 

size(200,200,P3D) ; 

} 

void draw() { 
background(128) ; 

rx = map(mouseX, 0 , width , -PI , PI) ; 
ry = map(mouseY, 0 , height , -PI , PI) ; 

translate(width/2,height/2,z) ; 
rotateX(rx) ; 
rotateY(ry) ; 
box(30) ; 

} 

Esittelemme uuden funktion map (), joka muuntaa arvojen joukon uudeksi arvojen joukoksi. 
Yksinkertainen esimerkki selittää tätä konseptia: 

float v = 100; 

float m = map(v, 0,200, 0,1); // m on 0.5 

Tässä esimerkissä map() muuntaa arvon 100 välillä [0, 200] vastaavaksi arvoksi välillä [0, 1]. 
Palautettu arvo on 0.5 m. 

Ohjelmissamme tämä funktio mahdollistaa mousex -arvon muuttamisen välillä 0 ja leveys 
vastaavaksi arvoksi välillä -PI ja PI. 

Funktiot pushMatrixQ ja popMatrix() toimivat myös kolmiulotteisessa grafiikassa, jossa voidaan 
tallentaa ja palauttaa muutokset. Tämä on paras tapa piirtää kolmiulotteinen maailma, jossa on 
joukko liikkuvia esineitä. Näin vältetään monimutkaiset matemaattiset konseptit. 

Kaikki Processingin muutokset tallennetaan 16 numeron sarjaan, jota kutsutaan matriisiksi 
(englanniksi matrix). Näitä numeroita muutosfunktiot muuttavat suoraan. Voit tulostaa tämän 
taulukon komennolla printMatrixQ. 
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28 - VIIVATYYLIT 



Rajaviivojen ja geometristen muotojen tyyliä voidaan muuttaa, jotta vältetään virheiden 
ilmestyminen viivojen leikkauskohtiin. Tähän tarkoitukseen käytetyt komennot esitellään alla. 

SMOOTH 



Metodi smoothQ mahdollistaa reunojen tasoittamisen. Sen avulla vältetään portaikkoefekti, joka 
tulee näkyville diagonaalisissa viivoissa. 

line(10, 0, 100, 90); // Ilman tasoitusta 

//Aktivoimme tasoituksen 
smooth() ; 

line(0, 10, 90, 100); // Viiva tasoitettu 




STROKEWEIGHT 



Metodi strokeWeight() mahdollistaa viivan paksuuden muuttamisen. 

line(10, 0, 100, 90); // Yhden pikselin paksuinen viiva 
strokeWeight(5) ; // Asetetaan paksuudeksi viisi pikseliä 
line(0, 10, 90, 100); // Viiden pikselin paksuinen viiva 




STROKECAP 

Metodi strokeCap () muuttaa viivan lopun ulkoasua. Tämä metodi ei ole hyödyllinen muodoissa. 
Sen arvot voivat olla SQUARE, PROJECT tai ROUND. Oletusarvoisesti käytetään arvoa ROUND. 
Tämä metodi ei toimi OpenGL tai P3D -tilassa. 

strokeWeight(10) ; // Määrittelemme paksuudeksi 10 pikseliä 
strokeCap(ROUND) ; 
line(20, 40, 60, 80); 

strokeCap(PROJECT) ; 
line(20, 20, 80, 80); 

strokeCap(SQUARE) ; 
line(40, 20, 80, 60); 
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STROKEJOIN 



Metodi strokeJoin() muuttaa kulmien ulkoasua. Sillä voi olla arvot MITER, BEVEL tai ROUND. 
Oletusarvoinen tila on MITER. Tämä metodi ei toimi OpenGL tai P3D -tiloissa. 

size(300, 100); // Muuttaa kuvan kokoa 

strokeWeight(10) ; // Määritellään paksuus 10 pikseliä 

strokeJoin(MITER) ; // Suorakulmat 
rect(20, 20, 60, 60); 

strokeJoin(BEVEL) ; // Karkeat kulmat 
rect(120, 20, 60, 60); 

strokeJoin(ROUND) ; // Pyöristetyt kulmat 
rect(220, 20, 60, 60); 
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29 - KUVAT 



Processingin "kuva" ei ole pohjimmiltaan mitään muuta kuin kokoelma pikseleitä, jotka on koottu 
suorakulmion sisään. Piirtääksemme kuvan ruudulle laitamme jokaiselle suorakulmion pikselille 
värin, jonka jälkeen annamme sijainnin (x, y), johon tahdomme piirtää tämän pikselikokoelman. 
On myös mahdollista muuttaa kuvan kokoa (leveys, korkeus), vaikka nämä ulottuvuudet eivät 
olisi yhteensopivia kuvan alkuperäisen koon kanssa. 

ETSI KUVA 

Piirtääksesi kuvan Processingissa, voit etsiä kuvan ja tuoda sen piirrokseen. Voit ottaa kuvan ja 
laittaa sen tietokoneellesi, ottaa kuvan kamerallasi, tai etsiä kuvia, jotka ovat koneellasi. Tässä 
harjoituksessa kuvan alkuperällä ei ole väliä. Aluksi neuvomme kokeilemaan melko pientä kuvaa, 
jonka koko on 400 x 300 pikseliä. 

Tässä aloitamme hieman kutistetulla kuvalla Ermenonvillen saarelta. Se löytyy Wikimedia 
Commonsista seuraavalta osoitteelta: 



http://fr.wikipedia.Org/wiki/Fichier:Erm6.IPG 




KUVAFORMAATIT 

Kolme kuvaformaattia hyväksytään Processingissa: PNG, JPEG tai GIF. Verkkosivuja 
suunnitelleiden ihmisten pitäisi tunnistaa nämä kolme kuvaformaattia, koska ne ovat 
suosituimpia WWW:ssä. Jokainen formaatti käyttää omia kuvanpakkauksen menetelmiään, joilla 
on etunsa ja haittansa: 

1. JPEG -kuvilla esitetään usein pakattuja valokuvia. JPEG ei salli läpinäkyviä alueita. 

2. GIF -kuva on usein käytössä käyttöliittymän napeissa ja muissa elementeissä. Siinä voi olla 
läpinäkyviä alueita. Se voi olla animoitu, mutta Processing ei kiinnitä huomiota animaatioihin. 

3. PNG -kuvia käytetään molempiin edellämainittuihin käyttötarkoituksiin (kuvat ja 
käyttöliittymä) ja siinä voi olla läpinäkyviä alueita, jotka eivät ole binääriä, ja jossa on asteittaisina 
vaihtoehtoina läpinäkyvä, osittain läpinäkyvä ja täysin läpinäkymätön. 

VETÄMINEN 
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Tuomme nyt kuvatiedoston Processing-ympäristöön. Saadaksemme tämän aikaan 
suosittelemme tallentamaan ensimmäisen luonnoksesi mieluiten Processing-tiedostoon, jonka 
pitäisi olla oletusarvoisesti My Documents tai Documents -hakemistossasi. 

Etsi nyt kuvatiedostosi ja vedä se suoraan Processing-ikkunaan: 



Exemplelmage | Processing 1.1 



OO HQQ 




Exemplelmage 














Kun siirrämme tiedostoja tällä tavalla, Processing osoittaa, että kuva lisättiin. Todellisuudessa 
Processing vain kopioi kuvan tiedostoon hakemistossa Data, jonka pitäisi näkyä nyt ohjelmasi 
vieressä. 
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Tässä tapauksessa hakemisto Data, johon itse asiassa laitamme kaikki kuvat - ja jopa muun 
median, kuten kirjasimet ja äänet - joita tahdomme käyttää kuvassamme. Jos tahdot päästä 
tähän hakemistoon nopeasti, esimerkiksi laittamalla sinne lisää kuvatiedostoja, valitse vain 
hakemistosta Sketch vaihtoehto Show Sketch Folder. Tähän vaihtoehtoon pääset myös 
valitsemalla pikavalinnan Ctrl-k VVindovvsissa ja Linuxissa tai Cmd-k Macissa: 
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% Processing File Edit | | Tools Help 



Run 3£R 
Present frSSR 
Stop 



Import Library... 




Show S k et c h Folder 


KK 


Add File... 





LATAA TIEDOSTO 



Nyt kun olemme asettaneet kuvan Data-hakemistoomme, voimme käyttää niitä 
ohjelmassamme. 



O Exemplelmage 




size(500,400) ; 

PImage saari = loadImage("ile . jpg") ; 
image(saari , 50 , 10) ; 

Ensin olemme antaneet piirroksellemme alueen, joka on isokokoisempi kuin kuvamme, jotta 
voimme paremmin ymmärtää, kuinka se voidaan sijoittaa viimeiseen luonnokseen. 

On kolme tapaa katsoa kuvaa Processingissa: 

1. Luo muuttuja, joka sisältää kuvan datan (pikselit). 

2. Tuo tiedoston pikselit muuttujaamme. 

3. Piirrä tämän muuttujan pikselit suunnittelutilassamme. 
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Ensin Processingissa täytyy luoda muuttuja. Mutta mikä on muuttuja? Tässä tapauksessa se on 
ohjelman sisäinen nimi, joka sisältää kaikki pikselit tiedostosta ile.jpg. Kun kirjoitamme sanan 
"saari", ohjelmamme ymmärtää, että tämä on pikselikokoelma, joka tekee kuvan. Tämä on 
täsmälleen funktion loadlmage("tiedostonimi") tarkoitus: se etsii nämä pikselit tiedostosta ja vie 
ne muuttujaan, jonka nimi on "saari". 

Olet ehkä huomannut myös oudon Plmage-sanan edellisen koodin alussa. Tämä osoittaa, 
millaisen Processing-muuttujan se avaa. Muuttujalle varataan sopiva määrä tilaa. Kaava on 
{muuttujan tyyppi}{muuttujan nimi}={muuttujan arvo}. 

Jos olisi esimerkiksi tarpeen tuoda koiran kuva Processingiin, voisimme käyttää komentoa 
PikkuKoira milou = loadDog("milou . dog") ; Kirjoitamme ensin olion tyypin ja sen jälkeen sen 
arvon. 

Tässä arvo annetaan funktiolla loadimage(), joka hakee kuvatiedoston pikselit ja tuo ne 
muuttujaan, jonka nimi on saari. 

Lisätietoa muuttujista ja muuttujatyypeistä on luvussa, joka käsittelee tätä aihetta. 

Lopulta, kun olemme täyttäneet muuttujamme, vedämme sen sijaintiin {x,y} kuvassamme. Jos 
tahdomme piirtää kuvan alkuperäisessä koossaan, käytämme lyhyttä versiota komennosta 
image, joka vaatii vain kolme muuttujaa: {Pimage}, {x}, {y}. 

image(saari , 50 , 10) 



TUO KUVA VERKOSTA 



Voimme myös tuoda kuvan suoraan World Wide Webistä, osoittaen kuvan osoitteen 
tiedostonimen sijasta. 

size(400,400) ; 
Pimage webcam; 

webcam = loadImage("http: //www. gutenberg . org/f i les/39 13/39 13-h/images/ rousseau . jpg") ; 
image (webcam, 10,20,width,height); 

Jos ohjelmamme ei ole animoitu, kuten tässä tapauksessa, joudumme vain odottamaan, kun kuva 
latautuu Processingiin. 



Varmista, että ohjelmasi ei lataa uusia kuvia käynnistyttyään, sillä muuten se pysähtyy aina 
ladatessaan. On olemassa muita tapoja tuoda kuvia tässä tapauksessa, mutta nämä tekniikat 
ovat liian kehittyneitä tähän kirjaan. Lisätietoa voit löytää Processing-foorumilta hakusanalla 
"thread". 



MUUTA KOKOA 



Lisäämällä kaksi parametriä voimme muuttaa kuvan kokoa. Tämä koko voi olla suurempi tai 
pienempi kuin alkuperäinen kuva, teoriassa rajaa ei ole olemassa. Kuitenkin kuvan alkuperäistä 
kokoa suurennettaessa Processing joutuu laajentamaan kuvan pikseleitä, mikä antaa 
pikselöityneen vaikutelman. Tämä tehoste voi usein olla käyttökelpoinen. 

Muittaaksesi kuvan kokoa, voit lisätä kaksi parametriä kuvaasi, {leveys, korkeus}, mikä antaa 
meille 5 parametriä: {kuva muuttuja, x, y, leveys,korkeus}. 
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size(500,250) ; 
PImage saari; 

saari = loadImage("ile . jpg") ; 

image (saari , 10, 10,20, 15) ; 
image (saari, 20, 20, 50, 30); 
image (saari ,45,45, 100, 75) ; 
image (saari, 95, 95, 1000, 750) ; 

Huomaa, että olemme tuoneet vain kerran saaren kuvan muuttujaan, sitä voidaan käyttää nyt 
koko loppuohjelmassa. Huomaa myös, että olemme kunnioittaneet kuvan ulottuvuuksia {x,y} 
kokoa muuttaessamme, mutta ne voisivat ottaa minkä tahansa arvon, joka venyttäisi kuvaa 
toisella näistä akseleista. 



»O 



mm 



Exemplelmage 



ALFA 

Usein täytyy tuoda kuvia, jotka eivät ole neliön tai suorakulmion muotoisia, kuten esimerkiksi 
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pienten kaksiulotteisten videopelien tapauksessa. Emme näe valkoista neliötä Pacmanin tai 
Marion ympärillä. Valitettavasti pikseleihin perustuvat kuvat täytyy nykyisin tuoda 
neliömuodossa. Tämän esteen kiertämiseksi jotkin tiedostomuodot käyttävät alfakanavan 
konseptia. Tämä asetetaan kuvan muodostavan punaisen, sinisen ja vihreän päälle. Tämä kerros 
osoittaa jokaisen pikselin läpinäkyvyyden asteen, PNG-kuvissa voi myös olla osittain läpinäkyviä 
pikseleitä. 

Jos tahdot tallentaa kuvasi alfakanavan kanssa, sinulla on kolme vaihtoehtoa, jotka voit valita 
viedessäsi kuvaa valitsemallasi kuvankäsittelyohjelmalla: 



Jokaisella ohjelmalla on tapa viedä kuvia. Sinun täytyy tietää, että esimerkiksi GIF, PNG-8 ja PNG- 
24 kuvien välilä on eroja, kuten alfa-kanavan käsittely. Näistä kolmesta turvallisin ja eniten 
vaihtoehtoja antava on PNG-24. 

Tässä on kuva runoilija Lucretia Maria Davidsonista, jonka voit ladata osoitteesta 
http://upload.wikimedia.Org/wikipedia/commons/1/17/LucretiaMariaDavidson_transparent.png 



Tämä kuva sopii täydellisesti tämän oppaan sivun pohjaan, koska siinä on ainoastaan alfakanava, 
joka kuvaa läpinäkyviä ja läpinäkymättömiä osia. Huomaa, että esimerkiksi Lucretian ympärillä 
olevat kuvat ovat läpinäkyviä, joten hänen otsansa ja niskansa ovat läpinäkymättömiä. 
Processing-kuvassamme näemme, että ne tosiaan ovat läpinäkymättömiä: 




Q Entrelace 
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size(400, 300) ; 

PImage saari = loadImage("ile . jpg") ; 
PImage lucretia; 

lue retiä = loadImage("LucretiaMariaDavidson_transparent . png") ; 

image(saari ,0,0); 
image(lucretia,20,20) ; 

KUVIEN VÄRITTÄMINEN 

Voit myös värittää kuvia. Toisin sanottuna voimme muuttaa pikselien väriä, joko kaikkien tai 
yksittäisten pikselien. Yksinkertaisin näistä menetelmistä tarkoittaa kaikkien pikselien 
värittämistä. Tämä väritysmenetelmä näyttää neliöiden värittämiseltä, mutta se vaatii uuden 
komennon, tintQ, jolla se erotetaan neliön pikselien suorasta värittämisestä. Tässä tapauksessa 
tintQ muuttaa jokaisen pikselin väriä, kun se piirretään piirrustusavaruuteen. 



F* ^ Exemplelmage 




size(500, 130) ; 
PImage saari; 

saari = loadImage("ile . jpg") ; 
tint(255,0,0) ; 

image(saari, 10,10, 110,110); 

tint(255, 255,0) ; 

image(saari , 130,10, 110,110); 

tint(255,255,255,127) ; 
image(saari, 250,10, 110,110); 

tint(0, 0,255, 127) ; 
image(saari , 320,10, 110,110); 
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Kuten komennot fillQ ja strokeO, komento tint() voit ottaa yhden, kaksi, kolme tai neljä 
arvoa, mikä riippuu siitä, mitä olemme tekemässä. Kun määrittelet kolme arvoa, voit esimerkiksi 
lisätä/vähentää punaisen, vihreän tai sinisen kerroksen intensiteettiä kuvassamme. Määrittämällä 
neljä arvoa voimme lisätä/vähentää kuvan läpinäkyvyyttä/läpinäkymättömyyttä. 

Kehittyneempi suunnittelu 
30. Tekstit 
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30 ■ TEKSTIT 



Kirjoitamme nyt tekstiä kuvaamme. Kuvaan kirjoittaminen ei muistuta kirjoittamista 
perinteisessä merkityksessä, kuten esimerkiksi tekstinkäsittelyohjelmassa. Processingin 
kirjoittaminen muistuttaa enemmän graffitin kaltaista kirjaimien maalaamista. Ne päätyvät kaikki 
toistensa päälle. Siinä keskitytään enemmän kirjaimien ja sanojen ulkoasuun. 

HEI, PROCESSING! 

Kuten perusmuotojen tapauksessa, vain yksi komento tarvitaan piirrettäessä tekstiä kuvaan. 
Avaa uusi ikkuna Processingissa, kirjoita seuraava rivi, ja toista se: 

text("Hei!", 10, 20); 

Näet pienen ikkunan, joka on oletusarvoista kokoa 100x100 pikseliä, ja jossa lukee sana "Hei!" 
kirjoitettuna valkoisella: 




Kuten nimestä voisi olettaa, komento text () piirtää tekstiä kuvaamme. Se vaatii kolme 
parametriä: {viesti, jonka tahdomme kirjoittaa},{koordinaatti x},{koordinaatti y}. 

Tämä teksti voidaan myös värittää, aivan kuin mikä tahansa geometrinen muoto, vaihtamalla 
täyttöväriä: 

fill(0); 

text("Heippa" , 10, 20); 
fill(255); 

text("koko", 10, 40); 

fill(255,0,0) ; 
text("maailma! " , 10, 60); 

Tämän ohjelman pitäisi antaa seuraava tulos, jossa jokainen neljästä väristä on kirjoitettu omalla 
värillään: 

Heippa 
maailma! 

Määritä vain väri, piirrä sen jälkeen teksti tuolla värillä. Voit tietenkin valita vain yhden värin ja 
kirjoittaa monta viestiä samalla värillä, tai piirtää värien yhdistelmällä, kuten tässä esimerkissä. 

KASAAMINEN 

Kuten tämän luvun johdannossa on mainittu, sanoja käytetään kuin piirroksessa, ei samalla 
tavalla kuin tekstinkäsittelyohjelmassa. Emme voi valita tai muokata tekstiä, ellemme kokonaan 
poista sitä ja kirjoita sen päälle. 
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Tässä on esimerkki periaatteesta: 



fill(0); 

text("sana voi", 10, 20); 
text("olla piilossa", 10, 40); 



fill(204) ; 
rect(28,25,50,20); 

fill(0); 

text("toinen" , 10, 60); 

fill(255, 255, 255); 
text ("toinen" , 11, 61); 



Olemme kirjoittaneet neljä viestiä, joskus samalla värillä, joskus toisella värillä. Huomaa, että 
sana "piilossa" on juuri piilotettu täyttövärillä, jolla on sama arvo kuin taustavärillä. 

sana voi 

on ai n 

loinen 



Kuten missä tahansa suunnittelussa, toimenpiteiden järjestys on tärkeä määriteltäessä lopullinen 
kuva. Tämä periaate pätee myös Processing-ohjelman ulkopuolella: "pukeudu, mene ulos, mene 
töihin" ei anna samaa tulosta kuin "mene ulos, mene töihin, pukeudu." 



Liitteet 

31. Vinkkejä 

32. Yleisiä virheitä 

33. Ulkoiset kirjastot 

34. Dokumentaatio verkossa 

35. Arduino 

36. Tästä oppaasta 

37. Lisenssi 



115 



31 - VINKKEJÄ 



Tässä luvussa on joukko ratkaisuja yleisiin ongelmiin, jotta voit välttää tietyt perusvirheet. Lisäksi 
tarjolla on koodinpätkiä, joita voit käyttää omissa ohjelmissasi. 

MUISTIN LISÄÄMINEN 



Jos ohjelmasi käyttää videota, useita kuvia tai käsittelee suuria tietomääriä, ohjelmasi voi antaa 
muisti lopussa -virheviestin. Tässä on Processingin virheviesti: 



OutOfMe morytrror: You may need to increase the memory setting in Preferences. 



Sinun täytyy avata Processingin asetukset (preferences) ja muuttaa ohjelmalle annetun muistin 
määrää. 



3 Increase maximum available memory to 204E ME 



KÄÄNNÄ BOOLEANIN ARVO (TRUE / FALSE) 

Tässä on mekanismi, joka kääntää booleanin true/false (tosi/epätosi) -arvon ilman if/then -testiä. 
Boolean-muuttuja käännetään laittamalla sen eteen huutomerkki. 

boolean julistaTieto; 

void setup() { 

julistaTieto = false; 

} 

void draw() { 
background(0) ; 

// Jos tosi, näyttää tekstin 

if (julistaTieto) text ("Tieto" , 10, 20); 

> 

void keyPressed() { 

// Kääntää julistaTieto-booleanin arvon vastakohdakseen 
julistaTieto = ! julistaTieto; 

} 

AIKAMITTARI KOMENNOILLA FRAMERATE (), FRAMECOUNT 
JA JAKOJÄÄNNÖS 

Jos tahdot tehdä jotain säännöllisin aikavälein, yksinkertaisin tapa on mitata kuvankäsittelyssä 
kulunutta aikaa komennoilla frameRate(), FrameCount ja % (jakojäännös). Näin voi käsitellä vain 
yhtä ajanjaksoa ohjelmassa. 



• Muuttuja FrameCount laskee, kuinka monta kertaa komentoa draw() on kutsuttu ohjelman 
alun jälkeen. 

• FrameRateO asettaa taajuuden, jolla komentoa draw() kutsutaan sekunnissa 
(oletusarvoisesti 30 kertaa sekunnissa). 

• Operaattori % (jakojäännös) palauttaa kahden numeron jakojäännöksen. 7%3 palauttaa 
jakojäännöksen 1 ja 8%2 palauttaa jakojäännöksen 0. 
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Jos tahdot tehdä toiminnon kerran sekunnissa, tämä koodi tekee toiminnon aina kun komentojen 
FrameCountO ja FrameRateO jakojäännös on 0. Seuraavassa esimerkissä kuvan päivitystaajuus 
(frameRate) sekunnissa on 24. Jos kuvan päivityskertojen (frameCount) ja päivitystaajuuden 
jakojäännös on 0, muutetaan taustaväri (background) satunnaiseksi väriksi. 

color vari; 

void setupQ { 
vari = 0; 
frameRate(24) ; 

} 

void draw() { 

background(vari) ; 
if (frameCount % 24 == 0) { 
vari = (int) random(255) ; 

} 



Harjoitus: muokkaa koodia niin, että väri vaihtuu kolmen sekunnin välein. 

TEE LUOKKA AIKAMITTARI 



Aikamittaria käytetään tekemään toiminto säännöllisin väliajoin. Tämä esimerkki näyttää, kuinka 
luodaan aikamittari-objekti, joka suorittaa koodinpätkän tietyin aikavälein. Sen periaatteena on 
tallentaa aika, jona ohjelma suoritettiin viimeksi, ja laskea aina draw() -metodikutsujen määrä, 
jotta nähdään, onko taas aika suorittaa koodi. Käytämme metodia millis(), joka palauttaa 
millisekunteina ohjelman käynnistämisestä kuluneen ajan. Tämä metodi antaa käsitellä useita 
aikavälejä samassa ohjelmassa ja toimii täsmällisesti, ajanjaksot eivät vaihtele, jos tietokone on 
kiireinen. 



Luokkamme koostuu näistä: 

• Aikaväli 

• Edellisestä aikamittarin kutsusta kulunut aika 

• Aikavälin saavuttamisen tarkastava toiminto 

class Aikamittari { 
int aikaväli; 
int viime_aika; 

Aikamittari (int alku_aikavali) { 
aikaväli = alku_aikavali ; 
viime_aika = millisQ; 

} 

boolean tarkistaAikavali () { 

if (millisQ > viime_aika + aikaväli) { 

viime_aika = millisQ; 

return true; 
} else { 

return false; 

} 

} 

} 

Tässä metodi tarkistaAikavali() tarkastaa edellisestä suorituksesta kuluneen ajan. Se palauttaa 
joko arvon true (tosi) tai arvon false (epätosi). Tyypillisesti teemme tietyn toiminnon aina 
kellonlyömällä. 

Ohjelmassamme julistamme muuttujan, joka tallentaa aikamittarimme. Jokaisella draw() - 
komennon kutsulla kutumme metodia tarkistaAikavali() objektistamme Aikamittari. Jos tämä 
metodi palauttaa arvon tosi, näytämme satunnaisesti sijoitetun neliön ruudullamme. Aikajakso on 
tässä 100 millisekuntia. 

Aikamittari aikamittari; 
void setupQ { 

aikamittari = new Aikamittari (100) ; 

} 
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void draw() { 

if (aikamittari . tarkistaAikavali ()) { 

reet (random(0, width), random(0, height), 10, 10); 

} 

} 

JÄÄDYTÄ DRAW () -KOMENNON TOISTAMINEN 



Komentoa draw() kutsutaan silmukassa koko ohjelman ajan, mikäli emme nimenomaisesti käske 
ohjelmaa jättämään sitä suorittamatta. Tämän silmukan voi kuitenkin pysäyttää komennolla 
noLoopt). Komento loop() käynnistää silmukan uudelleen. 

Seuraava esimerkki näyttää, kuinka voimme pysäyttää silmukan ja käynnistää sen uudelleen 
käyttäen S-näppäintä ja välilyöntiä. 

int position = 0; 
int increment = 1; 

void setup() { 
} 

void draw() { 
background(0) ; 

ellipse(50, position, 5, 5); 

// siirrämme sijaintia yhdellä pikselillä 

position += increment; 

// jos se koskettaa reunoja 

if (position > height | | position < 0) { 

// käännämme siirron arvon 

increment *= -1; 

} 

} 

void keyPressedO { 
if (key ==''){ 
II silmukka toistetaan 
loopQ ; 

} 

else if (key == 's' || key == 'S') { 
// pysäytämme silmukan 
nol_oop() ; 

} 

} 



LOPETA OHJELMA 



Lopettaaksesi ohjelman koodista käyttäjän toiminnan sijaan, kutsu metodia exitQ. 



// Voit lisätä tämän koodin edelliseen esimerkkiin 
else if (key == 'e' || key == ' E ' ) { 
exit(); // ohjelma lopetetaan 

} 
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32 - YLEISIÄ VIRHEITÄ 



UNEXPECTED TOKEN 

Tämä virheviesti tulee usein, mikäli unohdat kirjoittaa puolipisteen ";" rivin loppuun, tai et ole 
sulkenut aaltosulkeita. Ohjelma näkee silloin kahden rivin komennon, jolloin syntaksi on väärin. 

int kokonaisluku = 1 
int murtoluku = 0.1; 



unexpected token: int 



Oikea koodi on: 

int kokonaisluku = 1; 

int murtoluku = 0.1; 

CANNOT FIND ANYTHING NAMED 

Tämä virhe syntyy, kun kutsut muuttujaa, jota ei ole olemassa. Tarkasta, että olet julistanut 
muuttujan. 

int numero2 = numeroi + 5; 



Cannot find anyfhing named "nombrel" 



Oikea koodi on: 

int numeroi = 10; 

int numero2 = numeroi + 5; 

FOUND ONE TOO MANY... 

Tämä virheviesti tulee, kun et ole sulkenut koodiblokkia aaltosululla. 

void draw() { 
} 

void setupQ { 



Found ane tao ma ny { characters. wfthout a } to match tt. 



Oikea koodi on: 

void draw() { 
} 

void setup() { 
> 

ARITHMETICEXCEPTION: / BY ZERO 

int jakaja = 0; 
println(l / jakaja) ; 



ArrthmetteExceptton: / by zero 
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Nollalla ei voi jakaa. Tarvittaessa voit varmistaa, että ohjelma ei yritä jakaa nollalla. 

int jakaja = 0; 
if (jakaja != 0) { 

println(l / jakaja) ; 
} else { 

println("Ei voi jakaa nollalla!"); 

} 



CANNOT CONVERT ... TO ... 



Tämä virhe tulee, kun yrität laittaa muuttujaan arvon, joka ei sovi muuttujan tyyppiin. 

int a = 10; 
float b = 10.5; 

a = b; 



cannot convert from float to int 



Voimme laittaa murtoluvun (float) muuttujaan, joka on tarkoitettu kokonaisluvulle (int), mutta 
silloin meidän täytyy muuntaa luku kokonaisluvuksi. Oikea koodi on: 

int a = 10; 
float b = 10.5; 

a = int(b); 



ARRAYINDEXOUTOFBOUNDSEXCEPTION 



Tämä virhe tulee, kun yrität päästä tietokentän (array) ulkopuolella olevaan osatekijään. 
Seuraavassa esimerkissä taulun koko on 3 ja yritämme päästä laatikkoon 4. 

int[] numbers = new int[3]; 
numbers[0] = 1; 
numbers[l] = 20; 
numbers[2] = 5; 

printin (numbers [4]) ; 



ArraylndexOutOfHound&Exceptlon: 4 



Oikea koodi on: 

int[] numbers = new int[3]; 
numbers[0] = 1; 
numbers[l] = 20; 
numbers[2] = 5; 

println(numbers[3]) ; 



NULLPOINTEREXCEPTION 



Tämä virhe tulee, kun yrität päästä muuttujaan, jota ei ole muistissa. Kun yrität esimerkiksi 
päästä objektiin, jota ei ole vielä alustettu. 

Ball myBall; 

void setup() { 
myBall. x = 10; 

> 

class Ball { 
int x; 
int y; 

> 



NullPointerException 
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Oikea koodi on: 

Ball myBall = new BallQ; 

void setupQ { 
myBall. x = 10; 

} 

class Ball { 
int x; 
int y; 

} 



33 ■ ULKOISET KIRJASTOT 



Elämä on täynnä jännittäviä ongelmia, jotka odottavat ratkaisuaan. Kun kirjoitat ongelman 
ratkaisevan ohjelman, tahdot varmaankin jakaa hyödyn muiden kanssa. Jos julkaiset koodisi 
vapaalla lisenssillä, kuten GNU General Public License (GPL), muut voivat hyötyä siitä, sen sijaan 
että keksisivät pyörän uudelleen. 

Kirjasto on kokoelma luokkia, joita voidaan käyttää uudestaan kaikissa projekteissamme. 
Loputtomasti mielenkiintoisia Processing-kirjastoja on olemassa. Voit ladata kirjaston verkosta, 
purkaa sen arkiston, ja laittaa sen hakemistoon libraries. Hakemisto libraries on hakemiston 
Processing alla. 

Joukko kirjastoja tulee Processingin mukana. Käyttääksesi kirjastoa ohjelmassasi voit valita sen 
nimen hakemistossa Sketch > Import Library. Nämä kirjastot ovat vapaita: käyttäjät voivat 
vapaasti ajaa, kopioida, jaella, tutkia, muuttaa ja parannella niiden koodia. 

MISTÄ KIRJASTOJA LÖYTYY? 

Monet kirjastot eivät tule Processingin mukana, vaan ne täytyy ladata kirjaston ohjelmoijan 
verkkosivulta. Näin jakelu on helpompaa ja käyttäjät voivat saada kirjaston uusimman version. 

Yleisimmät kirjastot löytyvät kuitenkin Processingin verkkosivulta osoitteesta: 
http://processing.org/reference/libraries/ . 

KIRJASTON ASENTAMINEN 

Asennamme nyt kirjaston, jonka lataamme netistä. 

Käytämme kirjastoa ShapeTvveen, koska sitä on helppo käyttää. Se tarjoaa joukon tapoja 
elementtien animointiin. Tällainen työkalu on hyödyllinen siistien animaatioiden tekemiseen. 

Sanalla "tvveen" kuvataan usein animaatioita ja kuvasiirtymiä. Tämä sana tulee englannista ja 
merkitsee kuvia, jotka piirretään avainruutujen väliin perinteisessä animaatiossa. "Tween"-ruutu 
luo liikkeen vaikutelman. Kuvassa luodaan liikettä lisäämällä animaatiota liikkeen alku- ja 
loppupisteen välille. 

Processing-sivujen Libraries-sivulta löytyy linkki ShapeTvveen- 
sivuille: http://www.leebyron.com/else/shapetween/ . 

Dovvnload & Install 

shap etween.zip 

Unzip into the Processing libraries" folder 
Sketch -* Import Library -* shapetween 

Lataa arkisto ja pura zip-tiedosto. Puretun arkiston pitäisi sisältää hakemisto, jolla on kirjaston 
nimi, ja joka sisältää kirjaston tiedostot. Tämä hakemisto täytyy siirtää Processing-hakemiston 
alla olevaan Libraries-hakemistoon. Tämän jälkeen voit käynnistää Processingin uudestaan. 

KOKEILE ESIMERKKIÄ 
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Hyvät kirjastot sisältävät luokkiensa, metodiensa ja attribuuttiensa dokumentaation. Kirjastojen 
mukana tulee myös esimerkkejä. Jos esimerkkejä on tullut, voit kokeilla niitä hakemistosta File > 
Sketchbook > Examples. Kirjastomme nimen pitäisi olla siellä. Huomaa, että tämä toimii vain 
käyttöjärjestelmissä Mac OS X ja Windows. GNU/Linuxissa et näe esimerkkejä tässä 
hakemistossa. 



Edit Sketch Tools Help 



New 


3£N 


Open... 


^0 


Sketchbook 


HS 


Examples 




Cfose 




Save 


ns 


Save As... 




Export 




Export Application 


O^E 


Pag e Setup 




Print 


3£P 



Libraries 




&ing 1.2.1 




eontroIPS 

gestalt_p5 

glgraphics 

OpenCV 

oscPS 

pphys2d 

procontroll 

proxmf 

TUIO 



Jos kirjasto ei sisällä esimerkkejä, meidän täytyy hakea esimerkki netistä ja kopioida ja liittää se. 
Harjoitustyönä kopioimme ja liitämme esimerkin verkkosivulta ShapeTvveen. 

Krijaston verkkosivulla näet joukon esimerkkejä otsikolla Example Code. Napsauta esimerkkiä 
Basic Tvveen nähdäksesi hyvin yksinkertaisen hallitun liikkeen esimerkin. 

Kun olet saanut esimerkin toimimaan, voit muokata sitä, ja käyttää sitä omien kokeilujesi 
pohjana. 



import megamu . shapetween . *; 

Tvveen ani; 

void setup(){ 

size( 200, 200 ); 

ani = new Tween(this, 2, Tvveen . SECONDS) ; 
ani . startQ ; 



void draw(){ 

background(200) ; 
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float xl = 20; 
float yi = 30; 



float x2 = 180; 

float y2 = 190; 

float x = lerp( xl, x2, ani . posi tion() ); 

float y = lerp( yi, y2, ani . posi tion() ); 

fill(0); 

ellipse( x, y, 8, 8 ); 

} 

void mousePressed(){ 
ani . start() ; 

} 

KAUPALLISET KIRJASTOT 

Joskus lataat kirjaston ja huomaat, että se ei sisällä lähdekoodia. Kun katsot verkkosivua, näet 
sanat "Ali Rights Reserved" ilman sen kummempia selityksiä. Tässä tapauksessa kirjasto ei ole 
vapaa vaan kaupallinen. Voit käyttää sitä vapaasti, mutta ilman pääsyä sen koodiin. Et voi tutkia 
tai muuttaa sen toimintaa. Se ei ehkä toimi Processingin seuraavan version kanssa, jolloin et voi 
korjata sen yhteensopivuusongelmia. Jos nämä asiat ovat sinulle tärkeitä, ole tarkkana. Tarkasta 
aina että kirjaston mukana tulee lähdekoodi ja että koodissa on viittaus vapaaseen lisenssiin. 
Free Software Foundationin sivulla on lista lisensseistä, jotka sopivat yhteen GPL:n kanssa: 
http://www.fsf.org/ . 
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34- DOKUMENTAATIO VERKOSSA 



Processingin verkkosivu tarjoaa monta resurssia Processingin käytön aloittamiseen: oppitunteja, 
koodiesimerkkejä jne. Se tarjoaa myös sivun, joka listaa kaikki Processingin tarjoamat metodit, ja 
kuvaa tarkalleen niiden toiminnan havainnollisten esimerkkien kanssa. 



OPPITUNNIT 



Processing-sivujen Learning-osasto (http://www.processing.org/learning/) tarjoaa kahdenlaista 
sisältöä: askel askeleelta etenevän opetusohjelman ja monimutkaisempia koodiesimerkkejä, jotka 
esittelevät käytännön sovelluksia. 



Tutoria Is \ Examples: Basics , Topics , 3D , Librarv \ Boolea 



Useimpien esimerkkien koodi tulee Processingin mukana. Ne löytyvät hakemistosta File > 
Examples. 



HAKEMISTO 



Processing-sivuston hakemisto-osa (http://www.processing.org/reference/) tarjoaa kattavan listan 
Processingin tarjoamista metodeista. Ne on ryhmitelty aiheen mukaan. Jokaista kuvaillaan 
käyttäen kuvaesimerkkejä, syntaksin tarkkaa kuvailua ja listaa argumenteista. 



Mielenkiintoisimpia näiden sivujen osia ovat osat Syntax ja Parameters. Niissä kerrotaan, mitä 
sulkujen () väliin voi laittaa syntaksin mukaan metodin ajamiseksi. 



Pääset tähän hakemistoon suoraan Processing-ympäristöstä. Tehdäksesi tämän voit valita sanan 
(sana täytyy valita kokonaan) ja mennä hakemistoon Help > Find in Reference. Voit tehdä 
tämän myös näppäinkomennolla CTRL + SHIFT + F (Windows ja Linux) tai CMD + SHIFT + F 
(Mac). 



Sketch Tools 


Help | 


® n O 


G et ti n g Started 


2.1 




Environment 

Traubleshooting 

Reference 
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Tvoicl setup() { 
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Find in Reference O^F 




Frequently Asked Questions 
Visit Processing.org 3£5 




1 void draw|0 { 







KESKUSTELUPALSTA 



Processingin keskustelupalsta (http://forum.processing.org/) on toinen avun lähde. Monet ihmiset 
käyttävät sitä kuvatakseen ongelmiaan ja saadakseen vastauksia. Siellä on myös monia 
koodinpätkiä, joita voit lisätä ohjelmiisi. 
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35 - ARDUINO 



Arduino on avoin alusta elektroniikkaprototyyppien rakentamiseen. Se on mikrokontrolleri, jossa 
on sisään- ja ulostuloja, joihin voidaan kytkeä sensoreja ja aktuaattoreita (eli fyysiseen 
maailmaan vaikuttavia osia). Se sisältää myös ohjelmointiympäristön, joka perustuu Processingiin. 
Ohjelmointiympäristön avulla voit ohjelmoida elektronista mikrokontrolleria. Arduino on 
Processingin jatkokehittelyprojekti, se näyttää loogiselta seuraavalta askeleelta, kun tahdotaan 
kehittää fyysisessä maailmassa toimivaa interaktiivisuutta. Kun olet Processing-taituri, on 
Arduino sinulle jo tuttu. 



ARDUINO-MIKROKONTROLLERI 




Arduino on elektroninen piiri, joka voidaan kytkeä USB:n avulla tietokoneeseen, jolloin 
mikrokontrolleriin voidaan ladata sitä ohjaava koodi. Mikrokontrolleri on pieni prosessori, jossa on 
analogisia sisään- ja ulostuloja. Elektroninen laite on vapaa (muttei ilmainen), aivan kuin Arduino- 
ohjelmistokin. Voimme tutkia sen piirroksia ja suunnitella sen pohjalta kehittyneempiä versioita. 



ARDUINO-OHJELMISTO 
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File Edit Sketch Tools Help 



®0 E5 



clignoter_et_capter 



const int sortie_numerique = 13; 
int valeur_captee = G; 

void setupO { 

// 96QQ bits par seconde 

Serial.begin(96Q0)j 

pinMode (sortie_numerique, OUTPUT); 

} 

void loopf) { 

char octet_recu; 

if (Serial.availableO > 0) { 

// read the oldest byte in the serial buffer: 

oetet_recu = Serial, read O; 

if (octet recu == 1 1 1 ) { 




Mikrokontrolleriin lähettämämme koodi kostuu sarjasta komentoja, jotka käynnistetään, kun 
Arduinoon kytketään virta. Kun osaat ohjelmoida Arduinoa, voit kytkeä sen Processing- 
ohjelmaasi. 



VIRTUAALISEN JA FYYSISEN VUOROPUHELU 

Sensoreita käytetään mittaamaan fyysistä maailmaa, aktuaattorit voivat tehdä toimenpiteitä 
fyysiselle maailmalle. Voimme käyttää sensoreita vaikuttamaan Processing-ohjelmaan. 
Vastaavasti Processing-ohjelma voi käyttää aktuaattoreita vaikuttamaan fyysiseen maailmaan. 
Ohjelma voisi esimerkiksi lukea meteorologisista sensoreista, liikesensoreista tai yksinkertaisista 
ohjausnapeista tulevan tiedon. Tämän pohjalta ohjalma voisi hallita fyysiseen maailmaan 
vaikuttavia valoja, moottoreita ja muita laitteita. Tämä voi rikastaa ihmisten interaktiivista 
kokemusta. 



VIESTINTÄ 



Tietokoneet kommunikoivat toistensa kanssa käyttäen sähköisiä impulsseja. Impulssit lähetetään 
yksi kerrallaan, bittien sarjana. Bitti voi olla tosi tai epätosi. Se on numero yksi tai numero nolla. 
Bitit ryhmitellään yleensä kahdeksan bitin paketeiksi. Me kutsumme näitä paketeiksi tai tavuiksi. 
ASCII-merkistöä käyttävä kirjain on esitetty kahdeksalla bitillä. Voimme helposti viestiä Arduinon 
kanssa käyttäen kirjaimia. 

ESIMERKKI VIESTINNÄSTÄ KIRJAIMIEN AVULLA 

Tässä on yksinkertainen esimerkki kirjaimen lähettämisestä ja vastaanotosta Arduinolla. 
Välilyönnin painaminen kääntää päälle LED-valon Arduinon digitaalisessa ulostulossa 13. Arvot, 
jotka luetaan analogisesta sisääntulosta 0 muuttavat ohjelman näyttämän suorakulmion kokoa. 
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Dernier octet regu: j 
Dernier octet envoye: 



PROCESSING-KOODI 

Lähettäminen ja vastaanottaminen Processingilla on helppoa, kun käytämme kirjastoa 
processing.serial. Oikea sarjaporttinumero täytyy määritellä ja samoin oikea lähetysnopeus. 
Tässä lähetysnopeutemme on 9600 bittiä sekunnissa. 



/** 

* Yksinkertainen koodi Arduinon ja Processingin kommunikaatioon 

*/ 

import processing.serial.*; 

// Muuta tarvittaessa portin numero 

int portin_numero = 0; 

Serial porttini; // Sarjaporttia hallinnoiva objekti 
char viimeinen_ulos = ' '; // Viimeinen lähetetty bitti 
char viimeinen_sisaan = ' '; // Viimeinen vastaanotettu bitti 
void setupQ { 
size(200, 150); 

println("Porttilista : \n" + Serial . list() ) ; 
String portin_nimi = Serial . list () [portin_numero] ; 
porttini = new Serial(this, portin_nimi, 9600); 

} 

void draw() { 

if (porttini. availableO != 0) { 
// numero muutetaan kirjaimeksi 
viimeinen_sisaan = char (porttini . read()) ; 

} 

background(231) ; 
fill(0); 

text("Viimeinen vastaanotettu tavu: " + vi imeinen_sisaan , 10, 50); 

text("Viimeinen lähetetty tavu: " + vi imeinen_ulos , 10, 70); 

int leveys = int (vi imeinen_sisaan - 'a'); 

int kerroin = 5; 

stroke(0) ; 

noFill(); 

rect(10, 90, 26 * kerroin, 10); 

noStroke() ; 

fill(0); 

rect(10, 90, leveys * kerroin, 10); 

} 

void keyPressedO { 
if (key ==''){ 
porttini . write( ' 1 ' ) ; 
viimeinen_ulos = ' 1 ' ; 

} 

} 

void keyReleased() { 
if (key ==''){ 
porttini . write( ' 0 ' ) ; 
viimeinen_ulos = '0'; 

} 

} 

Tieto lähetetään yhtenä kirjaimena. Arduinon analogisen sisääntulon 0 lukema muutetaan 
kirjaimeksi a-z. Menetät hieman tarkkuutta, mutta tämä näyttää hyvin, kuinka kirjaimet 
koodataan numeroilla. 



KOODI ARDUINOLLE 
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Arduinon puolella esitämme analogisen sisääntulon 0 mittaaman arvon kirjaimella a-z. Arduino 
sytyttää ulostuloon 13 liitetyn LEDin. Se tulee Arduinon mukana, joten ei ole tarvetta juottaa sitä 
tai kasata piiriä prototyyppilaudalle. Tämä esimerkki toimii Arduinossa ilman mitään piiriä. Voit 
kytkeä sisääntuloon 0 analogisen potentiometrin, jos tahdot näyttää jotain muuta kuin hälyä. 

Ladataksesi seuraavan koodin Arduinoon joudut asentamaan Arduino-ohjelman ja opettelemaan 
sen toiminnan. 



* Tämä koodi täytyy ladata Arduinoon 

* 

* Viestii tietokoneen kanssa lähettääkseen arvon 

* analogisesta sisääntulosta 0 ja käyttääkseen 

* ulostuloa numero 13, joka on pieni lamppu. 

*/ 

const int sisaan_analoginen = 0; 
const int ulos_numero = 13; 
int numero = 0; 

void setup() { 

// Viestinopeus = 9600 baudsiaSerial . begin(9600) ; 
pinMode(ulos_numero , OUTPUT); 

} 

void loop() { 

char bitti_sisaan ; 
if (Serial.availableO > 0) { 
// Katsotaan saammeko signaalin 
bitti_sisaan = Serial . read() ; 
if (bitti_sisaan == '1') { 

digitalWrite(ulos_numero, HIGH); 
} else { 

digitalWrite(ulos_numero, L0W) ; 

} 

} 

// Lue analoginen sisääntulo 0: 

numero = analogRead (sisaan_analoginen) ; 

char laheta = 'a' + map(numero, 0, 1023, 0, 25); 

Serial . print (laheta) ; 

// Pieni hengähdystauko 

delay(10) ; 

} 

Kun Arduino on kytketty USB-porttiin ja koodi on lähetetty Arduinoon, käynnistä Processing- 
ohjelma. Kun painat välilyöntiä, ikkunassa näkyy jotain ja Arduino-laudan ulostulon 13 LEDi syttyy 
palamaan. 




Tämä koodi muistuttaa Processingin koodia, eikö totta? Tämä Arduinon koodi toimii 
mikrokontrollerissa, mutta on näin lyhyt! Itse asiassa se ei edes ole Javaa vaan C++ - 
ohjelmointikieltä. Koska Arduino on kehitetty samalla filosofialla kuin Processing, kehittäjät voivat 
tehdä kokeiluja elektroniikalla ja mikrokontrollereilla räjäyttämättä päätään. 
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Tällä esimerkillä loimme hyvin yksinkertaisen tiedonsiirtoprotokollan. Kaikki tekemämme on 
helppo ymmärtää. Tämä ei kuitenkaan ole kovinkaan joustava tai toimiva ratkaisu. Jos tarvitset 
tehokkaamman protokollan, voit löytää joukon kirjastoja ja esimerkkejä Arduinon sivuilta. 
Viestiprotokolla Messenger (http://www.arduino.ee/playground/Code/Messenger) on aika 
yksinkertainen ja sopii luultavasti tarpeisiisi. 
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36 - TASTA OPPAASTA 



Tämä opas on aluperin kirjoitettu ranskankielisessä FLOSS Manuals -dokumentaatiovvikissä. 
Alkuperäinen opas löytyy osoitteesta http://fr.flossmanuals.net/Processing/lntroduction . 

Oppaan ensimmäisessä versiossa oli noin 260 sivua. Se kirjoitettiin viidessä päivässä osana 
Pariisissa pidettyä kirjapyrähdystä syyskuussa 2010. Kirjapyrähdys on menetelmä, jossa joukko 
yhteen kokoontuneita ihmisiä voi luoda uuden oppaan muutamassa päivässä. VVikin käyttö 
kirjapyrähdykseen mahdollistaa myös etäosallistumisen internetin kautta. Lisätietoa 
kirjapyrähdyksistä löydät FLOSS Manualsista: http://fi.flossmanuals.net/BookSprints/lntroduction . 




TÄSTÄ OPPAASTA 

Suomennettu Processing-opas on tuotettu suomenkielisessä FLOSS Manuals - 
dokumentaatiovvikissä. Suomenkielisen FLOSS Manualsin löydät osoitteesta 
http://fi.flossmanuals.net . 

MIKÄ ON FLOSS MANUALS? 

FLOSS Manuals on dokumentaatiovviki vapaille ja avoimen lähdekoodin ohjelmille. Se on 
kansainvälinen verkosto ja Amsterdamissa perustettu säätiö. Alunperin vviki oli vain englanniksi, 
mutta se on lokalisoitu myös suomeksi, persiaksi ja hollanniksi. 

Lyhenne FLOSS tulee sanoista Free/Libre/Open Source Software. Suomeksi lyhenne käännetään 
yleensä sanoiksi Vapaat ja Avoimen Lähdekoodin Ohjelmat eli VALO. FLOSS Manualsin voisi siis 
suomentaa VALO-käyttöohjeiksi. 

FLOSS Manualsin suomenkielinen versio on avattu vuonna 2009. Tavoitteenamme on sekä 
suomentaa englanninkielisen sivuston käyttöohjeita että aloittaa uusien käyttöoppaiden 
kirjoittaminen Suomessa. Järjestämme käyttöoppaiden pohjalta myös työpajoja. 

FLOSS Manuals tarjoaa ilmaisia käyttöoppaita, jotka julkaistaan GPL-lisenssin alla. Uusi 
käyttöopas tuotetaan kaikkein tehokkaimmin kirjapyrähdyksessä, jossa ohjelmasta kiinnostuneet 
ihmiset kokoontuvat kirjoittamaan käyttöopasta. Kirjapyrähdys voi usein tuottaa uuden 
käyttöoppaan muutamassa päivässä. 
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Verkosto on saanut maineen laadukkaan dokumentaation tuottajana. Sitä tukevat avainprojektit, 
kuten One Laptop Per Child ja Archive.org. Kieliyhteisö laajenee nopeasti - käyttöoppaita 
käännetään nyt yli kahdellekymmenelle kielelle. 



Vapaiden ja avoimen ohjelmien maailmassa on paljon ohjelmoijia. Usein teknisistä kirjoittajista 
näyttää kuitenkin olevan pulaa. Yleisen vitsin mukaan uusi käyttäjä yrittää käyttää avoimen 
lähdekoodin ohjelmaa, mutta häntä neuvotaan lukemaan lähdekoodia. 

Tämän vuoksi tarvitsemme FLOSS Manualsia. Ihannetilanteessa dokumentaatio vastaa 
loppukäyttäjien taitotasoa. Loppukäyttäjä ei luultavasti ole kiinnostunut käytetyn 
ohjelmointikielen hienouksista tai vastaavista teknisistä seikoista. Loppukäyttäjä tahtoo käyttää 
ohjelmaa. 

Niinpä dokumentaatiossa käytetyn kielen tulisi olla ymmärrettävää maallikoille. Sitä ei tulisi 
kirjoittaa ohjelmointigurujen teknisellä jargonilla, kaikki tulisi kirjoittaa henkilölle, joka ei ymmärrä 
tietojenkäsittelytiedettä - mutta tahtoo tuottaa jotain. 

Tämä on FLOSS Manualsin idea. Tämän vuoksi tarvitsemme laadukasta dokumentaatiota 
avoimen lähdekoodin ohjelmille - rakentaaksemme sillan ohjelmien ja potentiaalisten käyttäjien 
välille. 



KÄYTTÄJIEN JA KIRJOITTAJIEN YHTEISÖN RAKENTAMINEN 



Pelkkä käyttöoppaan suomentaminen ei riitä. Sitä täytyy jatkuvasti päivittää, laajentaa ja 
lokalisoida sopimaan paikallisiin olosuhteisiin. Tämän vuoksi jokainen FLOSS Manualsin lokalisaatio 
tarvitsee kirjoittajien ja lukijoiden yhteisöä. 

VVikiin pohjautuva yhteistyö merkitsee sitä, että lukemattomien käyttäjien pienistä lisäyksistä 
muodostuu valtava määrä sisältöä. FLOSS Manuals tahtoo antaa kaikille vvikiin osallistuneille 
kunnian kirjoituksistaan, minkä vuoksi kirjoittajia pyydetään rekisteröitymään omalla nimellään. 

FLOSS Manuals pyrkii luomaan ratkaisun uuden käyttäjän ongelmaan: mistä löydän käyttöohjeet 
tälle ohjelmalle? 



FLOSS Manuals on osa Medios-projektia, jossa keskitytään tukemaan avoimen lähdekoodin 
audiovisuaalisten työkalujen käyttöä kansalaismedian tuottamiseen. Osaprojektissa luomme 
työpajoja koulujen, kansalaismediakeskusten ja erilaisten käyttäjäyhteisöjen kanssa. 
Tarkoituksena on tuoda uusia käyttäjiä ja kirjoittajia avoimen lähdekoodin yhteisöön. 



Medios-projektin löydät osoitteesta http://medios.metropolia.fi . 

Suomeen FLOSS Manualsin tuo Mediakulttuuriyhdistys m-cult. Suomen FLOSS Manuals toteutuu 
osana Euroopan Sosiaalirahaston ja Uudenmaan ELY-keskuksen rahoittamaa osallistuvan ja 
sosiaalisen median Medios-projektia. Medios-projektin osarahoittajana on myös Helsingin 
Kulttuurikeskus. Metropolia Ammattikorkeakoulun koordinoiman projektin toteuttajia ovat lisäksi 
Helsingin Kaupunginteatteri ja m-cult. 



DOKUMENTAATION TARVE 



TUKIJAT 
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Euroopan unioni 
Euroopan sosiaalirahasto 



Vipuvoimaa 

EU:lta 
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37 - LISENSSI 



Kaikki kappaleet ovat kirjoittajien tekijänoikeuden alaisia. Jos muuten ei sanota, kaikki luvut tässä 
käyttöoppaassa on lisensoitu GNU General Public License version 2 mukaisesti. 

Tämä dokumentaatio on vapaata dokumentaatiota: voit jakaa sitä eteenpäin ja/tai muokata sitä 
Free Software Foundationin GNU General Public License mukaisesti; joko lisenssin version 2, tai 
(tahtoessasi) minkä tahansa myöhemmän version. 

Dokumentaatiota jaellaan siinä toivossa, että se on käyttökelpoisa, mutta ILMAN MITÄÄN 
TAKUUTA; ilman edes MYYTÄ VYYDEN tai TIETTYYN KÄYTTÖÖN SOPIVUUDEN oletettua takuuta. 
Katso lisätietoja GNU General Public Licensestä. 

Tämän dokumentaation mukana olisi pitänyt tulla kopio GNU General Public Licensestä, mikäli 
sitä ei tullut kirjoita osoitteeseen Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, 
Boston, MA 02110-1301, USA. 

ALKUPERÄISET RANSKANKIELISEN VERSION TEKIJÄT 
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Les astu ces 
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Free manuals for free software 



GENERAL PUBLIC LICENSE 

Version 2, June 1991 

Copyright (C) 1989, 1991 Free Software Foundation, Inc. 
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA 

Everyone is permitted to copy and distribute verbatim copies 
of this license document, but changing it is not allovved. 

Preamble 

The licenses for most software are designed to take away your freedom to share and change it. 
By contrast, the GNU General Public License is intended to guarantee your freedom to share and 
change free software--to make sure the software is free for ali its users. This General Public 
License applies to most of the Free Software Foundation's software and to any other program 
whose authors commit to using it. (Some other Free Software Foundation software is covered by 
the GNU Lesser General Public License instead.) You can apply it to your programs, too. 

When we speak of free software, we are referring to freedom, not price. Our General Public 
Licenses are designed to make sure that you have the freedom to distribute copies of free 
software (and charge for this service if you wish), that you receive source code or can get it if 
you want it, that you can change the software or use pieces of it in new free programs; and that 
you know you can do these things. 

To protect your rights, we need to make restrictions that forbid anyone to deny you these rights 
or to ask you to surrender the rights. These restrictions translate to certain responsibilities for 
you if you distribute copies of the software, or if you modify it. 

For example, if you distribute copies of such a program, whether gratis or for a fee, you must 
give the recipients ali the rights that you have. You must make sure that they, too, receive or 
can get the source code. And you must show them these terms so they know their rights. 

VVe protect your rights with two steps: (1) copyright the software, and (2) offer you this license 
which gives you legal permission to copy, distribute and/or modify the software. 

Also, for each author's protection and ours, we want to make certain that everyone understands 
that there is no warranty for this free software. If the software is modified by someone else and 
passed on, we want its recipients to know that what they have is not the original, so that any 
problems introduced by others will not reflect on the original authors' reputations. 

Finally, any free program is threatened constantly by software patents. VVe wish to avoid the 
danger that redistributors of a free program will individually obtain patent licenses, in effect 
making the program proprietary. To prevent this, we have made it clear that any patent must 
be licensed for everyone's free use or not licensed at ali. 

The precise terms and conditions for copying, distribution and modification follow. 
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 
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0. This License applies to any program or other vvork vvhich contains a notice placed by the 
copyright holder saying it may be distributed under the terms of this General Public License. The 
"Program", belovv, refers to any such program or vvork, and a "vvork based on the Program" 
means either the Program or any derivative vvork under copyright lavv: that is to say, a vvork 
containing the Program or a portion of it, either verbatim or vvith modifications and/or translated 
into another language. (Hereinafter, translation is included vvithout limitation in the term 
"modification".) Each licensee is addressed as "you". 

Activities other than copying, distribution and modification are not covered by this License; they 
are outside its scope. The act of running the Program is not restricted, and the output from the 
Program is covered only if its contents constitute a vvork based on the Program (independent of 
having been made by running the Program). VVhether that is true depends on vvhat the Program 
does. 

1. You may copy and distribute verbatim copies of the Program's source code as you receive it, 
in any medium, provided that you conspicuously and appropriately publish on each copy an 
appropriate copyright notice and disclaimer of vvarranty; keep intact ali the notices that refer to 
this License and to the absence of any vvarranty; and give any other recipients of the Program a 
copy of this License along vvith the Program. 

You may charge a fee for the physical act of transferring a copy, and you may at your option 
offer vvarranty protection in exchange for a fee. 

2. You may modify your copy or copies of the Program or any portion of it, thus forming a vvork 
based on the Program, and copy and distribute such modifications or vvork under the terms of 
Section 1 above, provided that you also meet ali of these conditions: 

a) You must cause the modified files to carry prominent notices stating that you changed 
the files and the date of any change. 

b) You must cause any vvork that you distribute or publish, that in vvhole or in part 
contains or is derived from the Program or any part thereof, to be licensed as a vvhole at 
no charge to ali third parties under the terms of this License. 

c) If the modified program normally reads commands interactively vvhen run, you must 
cause it, vvhen started running for such interactive use in the most ordinary vvay, to print 
or display an announcement including an appropriate copyright notice and a notice that 
there is no vvarranty (or else, saying that you provide a vvarranty) and that users may 
redistribute the program under these conditions, and telling the user hovv to vievv a copy of 
this License. (Exception: if the Program itself is interactive but does not normally print such 
an announcement, your vvork based on the Program is not required to print an 
announcement.) 

These requirements apply to the modified vvork as a vvhole. If identifiable sections of that vvork 
are not derived from the Program, and can be reasonably considered independent and separate 
vvorks in themselves, then this License, and its terms, do not apply to those sections vvhen you 
distribute them as separate vvorks. But vvhen you distribute the same sections as part of a 
vvhole vvhich is a vvork based on the Program, the distribution of the vvhole must be on the terms 
of this License, vvhose permissions for other licensees extend to the entire vvhole, and thus to 
each and every part regardless of vvho vvrote it. 

Thus, it is not the intent of this section to claim rights or contest your rights to vvork vvritten 
entirely by you; rather, the intent is to exercise the right to control the distribution of derivative 
or collective vvorks based on the Program. 

In addition, mere aggregation of another vvork not based on the Program vvith the Program (or 
vvith a vvork based on the Program) on a volume of a Storage or distribution medium does not 
bring the other vvork under the scope of this License. 
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3. You may copy and distribute the Program (or a work based on it, under Section 2) in object 
code or executable form under the terms of Sections 1 and 2 above provided that you also do 
one of the follovving: 

a) Accompany it with the complete corresponding machine-readable source code, vvhich 
must be distributed under the terms of Sections 1 and 2 above on a medium customarily 
used for software interchange; or, 

b) Accompany it with a written offer, valid for at least three years, to give any third party, 
for a charge no more than your cost of physically performing source distribution, a 
complete machine-readable copy of the corresponding source code, to be distributed under 
the terms of Sections 1 and 2 above on a medium customarily used for software 
interchange; or, 

c) Accompany it with the information you received as to the offer to distribute 
corresponding source code. (This alternative is allowed only for noncommercial distribution 
and only if you received the program in object code or executable form with such an offer, 
in accord with Subsection b above.) 

The source code for a work means the preferred form of the work for making modifications to 
it. For an executable work, complete source code means ali the source code for ali modules it 
contains, plus any associated interface definition files, plus the scripts used to control compilation 
and installation of the executable. However, as a special exception, the source code distributed 
need not include anything that is normally distributed (in either source or binary form) with the 
major components (compiler, kernel, and so on) of the operating system on which the executable 
runs, unless that component itself accompanies the executable. 

If distribution of executable or object code is made by offering access to copy from a designated 
place, then offering equivalent access to copy the source code from the same place counts as 
distribution of the source code, even though third parties are not compelled to copy the source 
along with the object code. 

4. You may not copy, modify, sublicense, or distribute the Program except as expressly provided 
under this License. Any attempt otherwise to copy, modify, sublicense or distribute the Program 
is void, and will automatically terminate your rights under this License. However, parties who 
have received copies, or rights, from you under this License will not have their licenses 
terminated so long as such parties remain in full compliance. 

5. You are not required to accept this License, since you have not signed it. However, nothing 
else grants you permission to modify or distribute the Program or its derivative works. These 
actions are prohibited by law if you do not accept this License. Therefore, by modifying or 
distributing the Program (or any work based on the Program), you indicate your acceptance of 
this License to do so, and ali its terms and conditions for copying, distributing or modifying the 
Program or works based on it. 

6. Each time you redistribute the Program (or any work based on the Program), the recipient 
automatically receives a license from the original licensor to copy, distribute or modify the 
Program subject to these terms and conditions. You may not impose any further restrictions on 
the recipients' exercise of the rights granted herein. You are not responsible for enforcing 
compliance by third parties to this License. 
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7. If, as a consequence of a court judgment or allegation of patent infringement or for any other 
reason (not limited to patent issues), conditions are imposed on you (vvhether by court order, 
agreement or otherwise) that contradict the conditions of this License, they do not excuse you 
from the conditions of this License. If you cannot distribute so as to satisfy simultaneously your 
obligations under this License and any other pertinent obligations, then as a consequence you 
may not distribute the Program at ali. For example, if a patent license vvould not permit royalty- 
free redistribution of the Program by ali those vvho receive copies directly or indirectly through 
you, then the only way you could satisfy both it and this License vvould be to refrain entirely 
from distribution of the Program. 

If any portion of this section is held invalid or unenforceable under any particular circumstance, 
the balance of the section is intended to apply and the section as a vvhole is intended to apply in 
other circumstances. 

It is not the purpose of this section to induce you to infringe any patents or other property right 
claims or to contest validity of any such claims; this section has the sole purpose of protecting 
the integrity of the free software distribution system, vvhich is implemented by public license 
practices. Many people have made generous contributions to the vvide range of software 
distributed through that system in reliance on consistent application of that system; it is up to 
the author/donor to decide if he or she is willing to distribute software through any other system 
and a licensee cannot impose that choice. 

This section is intended to make thoroughly clear what is believed to be a consequence of the 
rest of this License. 

8. If the distribution and/or use of the Program is restricted in certain countries either by 
patents or by copyrighted interfaces, the original copyright holder who places the Program under 
this License may add an explicit geographical distribution limitation excluding those countries, so 
that distribution is permitted only in or among countries not thus excluded. In such case, this 
License incorporates the limitation as if written in the body of this License. 

9. The Free Software Foundation may publish revised and/or new versions of the General Public 
License from time to time. Such new versions will be similar in spirit to the present version, but 
may differ in detail to address new problems or concerns. 

Each version is given a distinguishing version number. If the Program specifies a version number 
of this License which applies to it and "any later version", you have the option of following the 
terms and conditions either of that version or of any later version published by the Free 
Software Foundation. If the Program does not specify a version number of this License, you may 
choose any version ever published by the Free Software Foundation. 

10. If you wish to incorporate parts of the Program into other free programs whose distribution 
conditions are different, write to the author to ask for permission. For software which is 
copyrighted by the Free Software Foundation, write to the Free Software Foundation; we 
sometimes make exceptions for this. Our decision will be guided by the two goals of preserving 
the free status of ali derivatives of our free software and of promoting the sharing and reuse of 
software generally. 

NO VVARRANTY 

11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO VVARRANTY FOR THE 
PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT VVHEN OTHERVVISE 
STATED IN VVRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES PROVIDE THE 
PROGRAM "AS IS" VVITHOUT VVARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, 
INCLUDING, BUT NOT LIMITED TO, THE IMPLIED VVARRANTIES OF MERCHANTABILITY AND 
FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND 
PERFORMANCE OF THE PROGRAM IS VVITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, 
YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 
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12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING WILL ANY 
COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR REDISTRIBUTE THE 
PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE USE OR 
INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF DATA OR DATA 
BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A 
FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER 
OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. 

END OF TERMS AND CONDITIONS 
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